State Management
Patterns and libraries for managing frontend application state predictably, from local component state to shared global state.
seed#state-management#redux#zustand#react#frontend#patterns
What it is
State management is how a frontend application organizes, updates, and shares data between components. As applications grow, state becomes complex: server data, UI state, forms, cache.
State levels
| Level | Example | Tool |
|---|---|---|
| Local | Menu toggle | useState |
| Shared | Theme, current user | Context, Zustand |
| Server | API data | TanStack Query, SWR |
| URL | Filters, pagination | URL params |
| Form | Inputs, validation | React Hook Form |
Evolution in React
| Era | Solution | Model | Tradeoff |
|---|---|---|---|
| 2015 | Redux | Global store, actions, reducers | Predictable but verbose |
| 2018 | Context API | Native shared state | Simple but unnecessary re-renders |
| 2020+ | Zustand/Jotai | Atomic stores, minimal boilerplate | Lightweight, less structure |
| 2020+ | TanStack Query | Separate server state from client | Requires thinking about cache invalidation |
Key principle
Use the simplest tool that solves the problem. Most applications don't need a global store.
Why it matters
State management is the most complex problem in frontend development. Choosing the right strategy — local, global, server, URL — determines the application's complexity, performance, and maintainability. There is no universal solution.
References
- Zustand — Minimalist React store.
- TanStack Query — Server state management.
- Managing State — React — React, 2024. Official React state management guide.