# State Management

> Manage application state predictably — local state first, lifting when needed, libraries only as last resort.

- Skill: `rahulrachhoya/state-management` (Agent Skill)
- Install (CLI): `npx skillmds@latest add rahulrachhoya/state-management`
- Raw SKILL.md: https://api.skillmd.com/api/skills/rahulrachhoya/state-management/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: RahulRachhoya (https://skillmd.com/u/rahulrachhoya)
- Updated: 2026-09-22
- Page: https://skillmd.com/skills/rahulrachhoya/state-management

---


# State Management

## Decision Tree
1. Can this be derived from existing state? → **derived state** (no new state needed)
2. Is it used by one component? → **useState** (local state)
3. Is it used by a small subtree? → **prop drilling** (simple case) or **useContext**
4. Is it complex (multi-step, undo/redo)? → **useReducer**
5. Is it used across many unrelated components? → **external library** (Zustand, Redux, Jotai)

## Rules
- Single source of truth for each piece of state
- State should be minimized — derive what you can
- Server state (API data) is different from UI state — use React Query/SWR for server state
- Don't put computed values in state — compute them during render

## Patterns
```typescript
// Good: derive from state
const [items, setItems] = useState<Item[]>([])
const totalPrice = useMemo(() =>
  items.reduce((sum, i) => sum + i.price, 0),
  [items]
)

// Bad: redundant state
const [items, setItems] = useState<Item[]>([])
const [totalPrice, setTotalPrice] = useState(0) // derived from items!
```