How do you choose a state management approach in React?

Question

Accepted Answer

Match the tool to the **kind** of state, rather than reaching for a global store by default. Most "global state" problems are really the wrong tool for the job.

## A decision guide

```text
Local UI state (toggle, input)      → useState / useReducer
Shared, low-frequency (theme, user) → Context
Server/API data                     → React Query / SWR  (NOT a global store)
Complex global client state         → Zustand / Jotai / Redux Toolkit
URL-shareable state (filters, page) → the URL (search params)
```

## The most important insight: server state ≠ client state

Data from an API is a **cache** of remote data, not state you own. Putting it in Redux means you manually handle loading, caching, refetching, and invalidation — painful and bug-prone. A server-state library does all that:

```jsx
// handles caching, dedup, background refetch, stale-while-revalidate for free
const { data, isLoading } = useQuery({ queryKey: ["todos"], queryFn: getTodos });
```

## Guidelines

- Keep state as **local** as possible; colocate it near where it's used.
- Don't put fast-changing values in **Context** (it re-renders all consumers).
- For shared client state with frequent updates, prefer a store with **selective subscriptions** (Zustand/Jotai) so components only re-render for the slice they read.
- Reach for Redux Toolkit when you need its devtools/middleware/structure on genuinely complex shared state.

The real skill is **minimizing and correctly placing** state — not picking a library.