How to Manage State in React Without Going Insane

Step 1: Understand the Five Layers of State

Not all state is created equal. React apps fail when developers shove everything into one bucket. There are five distinct categories, and each has a correct home:

1. Ephemeral UI state — dropdowns, modals, hover effects. Dies when the component unmounts. Lives in useState.
2. Complex local state — forms with validation, multi-step wizards. Transitions follow rules. Lives in useReducer.
3. Shared state — theme, auth, locale. Needed by many components. Lives in Context or Zustand.
4. Server state — API responses, cached data. Has loading/error/stale states. Lives in a fetching library or server components.
5. URL state — filters, pagination, search terms. Must survive refresh and be shareable. Lives in the URL via useSearchParams.

The decision tree is simple: ask where the state needs to be visible, how long it needs to live, and whether it needs to survive a page refresh. That determines the layer.

Step 2: Use useState for Ephemeral UI

useState is your default. If the state controls something visual and only one component cares about it, this is the answer.

When to move on from useState:

• You have more than 3 related useState calls in one component
• You're passing state down more than 2 levels
• State transitions depend on the previous state in complex ways

Step 3: Use useReducer for Complex Transitions

When state changes follow rules — especially when the next state depends on the current state and an action — useReducer brings order to chaos.

The reducer makes state transitions explicit and testable. You can write unit tests for formReducer without rendering anything.

Step 4: Use Zustand for Cross-Component State

When multiple components across different parts of the tree need the same state, prop drilling breaks down. Zustand gives you a store without the boilerplate of Redux.

Use Zustand when:

• Two or more unrelated components need the same data
• The state must persist across route changes
• You need to access state outside React (in utility functions, API calls)

Zustand stores are just hooks. No providers, no wrappers, no context hell.

Step 5: Use URL State for Shareable Application State

Filters, search queries, pagination, and sort orders belong in the URL. This makes the state shareable, bookmarkable, and browser-history compatible.

The rule: if a user would be confused that the state reset when they refreshed or shared the URL, it belongs in the URL.

Step 6: The Decision Tree in Practice

When you add new state, run through this checklist:

1. Does only one component use it? → useState
2. Does it have complex transitions or validation logic? → useReducer
3. Do multiple unrelated components need it? → Zustand store
4. Should it survive a page refresh? → URL state (useSearchParams)
5. Does it come from an API? → Server components or a fetch cache
6. Does it need to persist offline? → Zustand + IndexedDB (via persist middleware)

The most common mistake is over-engineering state management from the start. Begin with useState. Move to useReducer when transitions get complex. Reach for Zustand only when you have genuine cross-component needs. Put shareable state in the URL. Every layer exists for a reason — skip the ones you don't need.