# React State Management

> Master modern React state management with Redux Toolkit, Zustand, Jotai, and React Query. Use when setting up global state, managing server state, or choosing between state management solutions.

- Skill: `majiayu000/react-state-management-3` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add majiayu000/react-state-management-3`
- Raw SKILL.md: https://api.skillmd.com/api/skills/majiayu000/react-state-management-3/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: majiayu000 (https://skillmd.com/u/majiayu000)
- Updated: 2026-09-09
- Page: https://skillmd.com/skills/majiayu000/react-state-management-3

---


# React State Management

## Selection Criteria

| Type | Solutions |
|------|-----------|
| **Local State** | useState, useReducer |
| **Global State** | Redux Toolkit, Zustand, Jotai |
| **Server State** | React Query, SWR, RTK Query |
| **URL State** | React Router, nuqs |
| **Form State** | React Hook Form, Formik |

```
Small app, simple state       -> Zustand or Jotai
Large app, complex state      -> Redux Toolkit
Heavy server interaction      -> React Query + light client state
Atomic/granular updates       -> Jotai
```

## Zustand

Create stores with `create<State>()`. Wrap with `devtools()` and `persist()` middleware. Use slice pattern with `StateCreator` for scalable stores. Select specific state to prevent re-renders: `useStore(s => s.user)`.

### Zustand Advanced

Stack middleware: `devtools(subscribeWithSelector(persist(immer(...))))`. Use `partialize` for partial persistence, `subscribeWithSelector` for external subscriptions. Test via `useStore.getState()`.

## Redux Toolkit

Use `configureStore` + `createSlice`. Type `RootState` and `AppDispatch` from store. Use `createAsyncThunk` for async operations with `pending/fulfilled/rejected` matchers.

## Jotai

Use `atom()` for base state, `atom(get => ...)` for derived, `atomWithStorage` for persistence. Write-only action atoms: `atom(null, (get, set) => ...)`.

## React Query

Use query key factories for cache organization. `useMutation` with `onMutate` for optimistic updates: cancel queries, snapshot previous, set optimistic data, rollback `onError`, invalidate `onSettled`.

## Combining Client + Server State

Zustand for UI state (sidebar, modal), React Query for server state. Never duplicate server data in client stores.

## Cross-References

- **frontend:nextjs-app-router-patterns** -- server/client state boundary, React Server Components context
- **frontend:form-patterns** -- form state management, React Hook Form integration
- **frontend:i18n-and-localization** -- locale state management, context providers