# React State Management

> Standards for managing local, global, and server state.

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

---


# React State Management

## **Priority: P0 (CRITICAL)**

Choosing the right tool for state scope.

## Implementation Guidelines

- **Local**: `useState`. `useReducer` if 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](references/REFERENCE.md).

## Related Topics

hooks | component-patterns | performance