| name | React State Management |
|---|---|
| description | Standards for managing local, global, and server state. |
| metadata | {"labels": ["react", "state", "redux", "zustand", "context"], "triggers": {"files": ["**/*.tsx", "**/*.jsx"], "keywords": ["state", "useReducer", "context", "store", "props"]}} |
React State Management
Priority: P0 (CRITICAL)
Choosing the right tool for state scope.
Implementation Guidelines
- Local:
useState.useReducerif complex (state machine). - Derived:
const fullName = first + last. No state sync. - Context: DI, Theming, Auth. Not for high-freq data.
- Global: Zustand/Redux for app-wide complex flow.
- Server Cache: Use
React.cache(RSC) to dedupe requests per render. - Server State: React Query / SWR / Apollo. Cache != UI State.
- URL: Store filter/sort params in URL (Source of Truth).
- Immutability: Never mutate. Use spread or Immer.
Anti-Patterns
- No Prop Drilling > 2: Use Context/Composition.
- No Mirroring Refs: Don't copy props to state.
- No Multi-Source: Single Source of Truth.
- No Context Abuse: Context causes full-tree re-render.
Reference & Examples
For Zustand, Redux Toolkit, and TanStack Query patterns: See references/REFERENCE.md.
Related Topics
hooks | component-patterns | performance