HomeReact
Chapter 14
14 — Zustand
Zustand is a minimal, unopinionated state management library. No boilerplate, no providers, no context — just a hook.
Why Zustand?
| Feature | Zustand | Redux Toolkit | Context |
|---|---|---|---|
| Boilerplate | Minimal | Moderate | Low |
| Provider needed | ❌ No | ✅ Yes | ✅ Yes |
| DevTools | ✅ Yes | ✅ Yes | ❌ No |
| Middleware | ✅ Yes | ✅ Yes | ❌ No |
| Bundle size | ~1KB | ~11KB | 0 (built-in) |
| Re-render control | Selector-based | Selector-based | All consumers |
| Learning curve | Very low | Moderate | Low |
Basic Pattern
import { create } from "zustand";
const useStore = create((set) => ({
count: 0,
increment: () => set((state) => ({ count: state.count + 1 })),
}));
// In component:
const count = useStore((state) => state.count);Key Concepts
| Concept | Description |
|---|---|
create | Creates a store (returns a hook) |
set | Updates state (shallow merge by default) |
get | Read current state outside React |
| Selectors | useStore(s => s.count) — only re-render when selected value changes |
| Middleware | devtools, persist, immer, subscribeWithSelector |
File
zustand-store.tsx— basic store, selectors, async actions, slices, middleware (persist, devtools, immer), computed values