React State Management

Selection Criteria

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