# React State Management

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

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

## Code

```tsx
// Derived State (Efficient)
function List({ items, filter }) {
  // Correct: Calculated on fly
  const visible = items.filter((i) => i.includes(filter));
  return (
    <ul>
      {visible.map((i) => (
        <li key={i}>{i}</li>
      ))}
    </ul>
  );
}

// Zustand (Global)
const useStore = create((set) => ({
  count: 0,
  inc: () => set((s) => ({ count: s.count + 1 })),
}));
```