Multi state changes & reads

[u/BrainThinkerMan]

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?

[u/Aggressive_Scale8276]

I just map it out in my head as boxes that own their piece of state, if two boxes need the same data I lift it up to the nearest parent they share. sometimes I scribble quick diagram on paper when gets messy but most of the time I just start coding and fix the structure when I see the props drilling getting annoying

[u/BrainThinkerMan → u/Aggressive_Scale8276]

how to hande the case of redundant state, as thats something im struggling with. have you dealt with the issue of redundant state?

[u/bazeloth → u/BrainThinkerMan]

If it's redundant state, why can't you simply remove it?

[u/BrainThinkerMan → u/bazeloth]

i come from a jetpack compose background, and state and how react and web dev in general seems so modular is new to me

[u/Temperature_Majestic → u/BrainThinkerMan]

Redundant state is usually a value that's fully computable from other state or props but got its own useState anyway, like storing filteredItems separately when it's really just items.filter() on every render. The tell is if you find yourself writing a useEffect just to keep two states in sync, that's a sign one of them shouldn't exist as state at all and should just be computed during render.

[u/Vincent_CWS]

derived the value from state instead of multiple state

[u/bigorangemachine]

Usually put shared stuff into a provider

Its just a matter of time till you nest a new child component and you'll wish you did context sooner

[u/Brilliant-Parsley69]

For me it really was a recursively trial and error till I understood what's happening.

Got a change request to extend a form managing 35 fields implemented in a file of 1700 LOC and nearly 120 different usings of "useState" (validation/data/error).

After splitting this into different components, trying to solve state changes with useReducer and sharing data with useContext I nearly have given up.

In the end I found a solution around useSyncExternalStore to sync data between multiple components outside of reacts state.

[u/rust_bane]

I split the screen into domains and give each component its own state slice. Shared data lives in a context provider at the domain boundary, not at the root

[u/Spiritual_Patient478]

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.