[Mind-Checkins] What I’ve Learned Rebuilding a React Game

Hello everyone, お元気ですか？

Today I want to share my experience with React. I was first exposed to it last year and built a few small apps. But since it was my first time learning React, I struggled with some of the syntax and core concepts. Later, I joined a bootcamp that focused primarily on Ruby on Rails, so I hadn’t touched React in a while. I was afraid my React skills might get rusty, so I recently decided to revisit its fundamentals by building a React-based game.

This game is inspired by Tic-Tac-Toe but with a fun twist around tariffs and trade wars. Through building it, I gained some important takeaways I’d love to share.

Single Source of Truth Is Everything

One of the most powerful features of React is props. You can pass props through component layers and use them to drive conditions, rendering logic, and behaviors. But here’s the catch: props are only powerful when you keep them organized.

In my early attempts, I created multiple pieces of state and passed down props from different levels, trying to manage game data across components. Before I knew it, I had two different props holding similar information, leading to bugs and confusion. I couldn’t even tell which value was the "real" one I should trust.

That’s when I truly understood the importance of having a Single Source of Truth — one central place where the most essential data lives.

In my game, the single source of truth is a gameTurns state — an array that records every move made by each player. This one state tells me:

• Who played which turn
• In what order
• What decision (e.g., tariff rate) was made

From that single state, I can derive everything else: whose turn it is now, whether someone has won, how much money each player has left, and so on. Instead of duplicating data across components, I derive data from gameTurns. This keeps the app consistent, reduces bugs, and makes debugging a breeze.

A good rule of thumb: If a piece of information can be calculated from your existing state, don’t store it separately — compute it on the fly.

So next time you’re building in React, ask yourself:

• Is this value something new I need to store?
• Or can it be derived from my existing source of truth?

This mindset alone will level up your React architecture.

Give Yourself Time to Learn and Relearn

Last year, I struggled with basic React concepts — like when to use function vs function() or how to structure my state properly. It all felt overwhelming.

But this time, after gaining more exposure to different programming languages like Ruby, JavaScript, and Python, I found myself connecting the dots. What confused me before suddenly made more sense. I even realized how much of my past confusion came from simply lacking repetition and context.

We often underestimate how much time it takes to truly “get” something — especially in programming. It’s not that we lack talent, it’s that we haven’t spent enough time breaking through the mental walls.

I remember learning Python during my freshman year. As soon as we hit the topic of loops, I gave up. I told myself, “Maybe I’m just not meant for coding.” Looking back, it wasn’t a matter of potential — I simply didn’t give it enough time or effort.

So here’s my message to you (and to myself):

Don’t rush your growth. Give yourself space to try, to fail, to repeat — and eventually, to connect everything.

Final Thoughts

Building this game wasn’t just about reviewing syntax — it reminded me of how powerful React can be when used thoughtfully. More importantly, it taught me the importance of structuring data clearly and being patient with myself.

To anyone out there struggling with a new tech stack:

Keep building. Keep breaking things. And always ask yourself —

“Where is my source of truth?”

To anyone who is interested in my game, you can visit this following link: https://tariff-game-9e01fa038b45.herokuapp.com/

じゃ、またね！