marcioaltoe Zustand
Lightweight state management for React. No providers, no boilerplate. Stores are hooks.
Quick start
import { create } from "zustand"
interface BearState {
bears: number
increase: (by: number) => void
}
const useBearStore = create<BearState>()((set) => ({
bears: 0,
increase: (by) => set((state) => ({ bears: state.bears + by })),
}))
// In components — select only what you need
const bears = useBearStore((state) => state.bears)
Critical rules
- TypeScript: Use curried form
create<T>()(...)— required for type inference - Immutability: Treat state as immutable.
setshallow-merges at one level only - Selectors: Always select specific fields, not the whole store. Use
useShallowfor multi-field selectors returning new references - Middleware order:
devtoolsmust be outermost:devtools(persist(immer(...))) - Next.js: Create stores per-request via
createStore+ Context, NOT globalcreate - Nested updates: Use Immer for deep nesting, spread operator for shallow
When to use what
| Need | Solution |
|---|---|
| Basic React store | create<T>()(...) |
| Vanilla (non-React) store | createStore from zustand/vanilla |
| Use vanilla store in React | useStore(store, selector) |
| Auto-infer types (no interface) | combine middleware |
| Persist to localStorage | persist middleware |
| Redux DevTools | devtools middleware |
| Mutable-style updates | immer middleware |
| Subscribe to slices externally | subscribeWithSelector middleware |
| Multiple fields without rerender | useShallow wrapper |
| Large store modularization | Slices pattern with StateCreator |
| Next.js App Router | createStore + Context + Provider |
| Reset store | set(initialState) or store.getInitialState() |
References
- API reference (create, createStore, hooks, shallow): See references/apis.md
- TypeScript patterns (curried create, slices, middleware typing, custom middleware): See references/typescript.md
- Middlewares (persist, devtools, immer, redux, combine, subscribeWithSelector): See references/middlewares.md
- Patterns & best practices (Next.js, testing, reset, auto-selectors, SSR, deep updates): See references/patterns.md