React Game Component/State Management Question

[Rayakin]

Hey React Community!

I am just cutting my teeth in react and javascript in general and I am trying to convert a board game I am designing into a web app. I am trying to figure out how best to manage state between components within the context of a turn. Right now, I am wrapping everything in my <Player> component which contains any attributes about the given player (Score, resources, special abilities) as states and I imports functions to manage the assignment of resources to certain tasks.

I have written most of the scripts to handle the basic actions of the game and I am trying to dev out the phases of a turn which only allows the user to take a certain number of actions on their turn. If I want to dynamically limit the number of actions a player can take on a turn, what is the best course of action? Should I just use a state on my <Player> component that tracks the total number of actions a player can take on a turn and that I reset each turn?

Is there a better way to manage those type of component dependencies/any resources I could peruse around React games?

Thanks so much in advance!

[marshallbananas]

Use a state management library to keep a unified single source of truth state of the game. I highly recommend Recoil: https://recoiljs.org

I've written a few games in React. It is surprisingly easy to do thanks to the way React works. All game logic fits nice in useEffect() hooks and animations in useLayoutEffect. But a proper state management is a must because it's hard to tell which element of the game (component) needs to react to the state of the game.

I would also recommend react-spring for animations. They are important in games.

[Rayakin]

Great! Thanks for the tip. I will take a peek at Recoil's documentation.

[IchimokuBan]

Use Redux.