react-state-management

name	react-state-management
description	Select and implement local, global, and server state patterns in React. Use when choosing or implementing state management (Context, Zustand, Redux, React Query) in React.
metadata	{"triggers":{"files":["**/*.tsx","**/*.jsx"],"keywords":["state","useReducer","context","store","props"]}}

React State Management

Priority: P0 (CRITICAL)

Implementation Guidelines

• Selection: Zustand for small-medium apps (minimal boilerplate, no Providers). Redux Toolkit (RTK) for large apps needing time-travel debugging or complex middleware.
• Server Data: Use React Query or SWR for server state. Never sync server data into useState manually. Let cache source of truth.
• Form/Mutation State (React 19): Use useActionState for a form's pending/result/error triad instead of three separate useState calls; use useOptimistic to show an optimistic value while a mutation is in flight, reverting on error automatically.
• Context API: Use for low-frequency data like theme, auth, locale, or DI. Not for high-frequency updates (causes global re-renders). Split Context between State and Dispatch to optimize.
• Global Updates: Use Zustand, Jotai, or Redux for frequent/complex updates across app.
• Local: for simple UI toggles. for complex state machines.