React State Management Patterns

Choose and implement the right React state solution — Redux Toolkit, Zustand, Jotai, or TanStack Query. Separates server state from client state and structures stores that scale without prop drilling or over-rendering.

This skill helps you pick between Redux Toolkit, Zustand, Jotai, and TanStack Query based on the problem, then implements it cleanly. It separates server cache from client UI state, sets up typed stores/slices/atoms, adds persistence and devtools, and avoids common re-render and prop-drilling pitfalls.

When to use

Use when adding global state to a React app, deciding between Redux/Zustand/Jotai/React Query, separating server and client state, or refactoring tangled Context and prop drilling.

Examples

Server vs client state

Split concerns correctly

Refactor this component to fetch server data with TanStack Query and keep only UI state in Zustand, removing the manual loading/error booleans

Atomic state with Jotai

Fine-grained atoms

Model a multi-step form's state with Jotai atoms so each field updates independently without re-rendering the whole form