State Management
Overview
State management is the practice of storing and deriving UI data in the right place.
Why It Matters
Bad state placement creates bugs, duplication, and hard-to-debug UI drift.
Core Concepts
- UI state lives close to the UI.
- Server state comes from the backend.
- Derived state should usually not be stored separately.
Mental Models
Ask whether the state is local, shared, cached, or derived. The location should match the lifespan and ownership.
Best Practices
- Keep state as local as possible.
- Use a shared store only for shared needs.
- Prefer deriving from source of truth over copying values.
Common Mistakes
- Duplicating server state in multiple places.
- Storing derived state and syncing it manually.
- Using a global store for everything.
Trade-offs
Local state is simple, but shared workflows need shared state. Global state helps coordination, but it can also make everything depend on everything else.
Decision Framework
| State type | Best place |
|---|---|
| Input value | Local component state |
| Cross-page UI setting | Shared client store |
| Backend data | Server cache / fetch layer |
Examples
const fullName = `${user.firstName} ${user.lastName}`;Prefer deriving fullName instead of storing it.
Checklists
- Is this state really needed?
- Is it stored in the smallest useful scope?
- Is anything duplicated that could be derived?
Senior Engineer Notes
Senior engineers are ruthless about state placement because state is where bugs like to hide.