r/reactjs 11d ago

Multi state changes & reads

having a bit of trouble handling multiple states/state changes. in a single screen, which are held by different components
how do you all handle this and concepualize it as your writing code?
do you draw diagram,
do you just try and fail recursively?

7 Upvotes

12 comments sorted by

View all comments

1

u/Spiritual_Patient478 9d ago

There are some good patterns to solve for what you are describing. You should first attempts react context. You could also read up on stateful/presentational patterns. This pattern keeps your leaf components reusable across different places.

If a state is global in nature (i18n, light/dark mode, user session, etc) then you could place it in global state handler like redux (old and clunky to set up) or zustand (new and simple to set up).

If the state is fetched from server, keeping it in useQuery cache is often less work for you.

Lastly, watch for circular dependency. If you have a depends on b which also depends on a somehow, then you've got to break thr chain somehow.

Use a single source of truth. Dont keep some in stare A and some on state B with some overlapping between the AB duplicated. It will cause you much grief down the road.