State Management in React

Categories of State

UI state (modal open, tab selected) often stays local. Server state (API data) fits TanStack Query. Shared client state (cart, auth user) may use context or Zustand/Redux.

Start simple. Add global solutions when prop drilling or sync bugs prove you need them — not preemptively.

// Local — one component
const [open, setOpen] = useState(false);

// Server — TanStack Query
const { data } = useQuery({ queryKey: ['posts'], queryFn: fetchPosts });

// Global client — Zustand
const items = useCartStore(s => s.items);

Different state types belong in different layers.

State Management Spectrum

Local useState     →  component-only UI state
Lifted state       →  shared between few siblings
Context            →  theme, auth, locale (low churn)
useReducer/Redux   →  complex client workflows
TanStack Query     →  server/async/cache state

• Colocate state as close to where it's used as possible.
• Don't duplicate server data in global client stores.
• Separate server cache from UI/client global state mentally.
• Document where each type of state lives in your app.

State Tool Picker

Which tool for which state type.

Colocation Principle

Keep state as local as possible for as long as possible. Lifting and globalizing are refactoring steps when concrete pain appears — duplicated fetches, sync bugs, or unmaintainable prop chains.

Server State vs Client State

Server state is asynchronous, shared, and can go stale. Client state is synchronous and owned by the UI. TanStack Query owns server state; Zustand/Redux own client global state. Mixing them creates duplication.

Common Mistakes

• Storing API data in Redux when TanStack Query fits better.
• Globalizing all state on day one.
• Duplicating the same data in context and a store.
• Ignoring URL as state for shareable/bookmarkable UI.

Key Takeaways

• Match state tools to state categories: UI, server, global client.
• Colocate first; globalize when justified.
• TanStack Query for server data; Zustand/Redux for complex client globals.
• Avoid duplicating server state in client stores.