State management
Global state: Context, Redux Toolkit & Zustand
Choosing a state solution and avoiding over-engineering.
Not all state is equal. Local state stays in useState/useReducer; server state (fetched data) is best handled by React Query/SWR (caching, revalidation) rather than a global store; only truly global client state needs a store.
Client state is your desk drawer, server state is the shared filing cabinet (best managed by a librarian like React Query), and a global store is the company vault — do not put lunch in the vault.
Key concepts
1
Redux Toolkit is the modern Redux: slices, immutable updates via Immer, and built-in thunks — predictable and devtools-rich, but heavier. Zustand is a minimal hook-based store with almost no boilerplate and selective subscriptions.
Redux ToolkitZustand
2
Context is for low-frequency global values (theme, auth), not high-frequency updates, because every consumer re-renders.
3
Pitfall: dumping server data into Redux and hand-rolling caching that React Query gives for free. Interview angle: "Context vs Redux vs React Query?" — separate server state from client state; pick the lightest tool that fits.
Pitfall:Interview angle:
jsx
// Zustand — tiny global store with selective subscription
const useCart = create((set) => ({
items: [],
add: (item) => set((s) => ({ items: [...s.items, item] })),
}));
function Badge() {
const count = useCart((s) => s.items.length); // re-renders only when count changes
return <span>{count}</span>;
}