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

1. TypeScript: Use curried form create<T>()(...) — required for type inference
2. Immutability: Treat state as immutable. set shallow-merges at one level only
3. Selectors: Always select specific fields, not the whole store. Use useShallow for multi-field selectors returning new references
4. Middleware order: devtools must be outermost: devtools(persist(immer(...)))
5. Next.js: Create stores per-request via createStore + Context, NOT global create
6. Nested updates: Use Immer for deep nesting, spread operator for shallow

When to use what

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