Zustand State Management

Minimal state management - no providers, minimal boilerplate.

Quick Reference

typescript
1import { create } from 'zustand'
2
3interface BearState {
4  bears: number
5  increase: (by: number) => void
6}
7
8const useBearStore = create<BearState>()((set) => ({
9  bears: 0,
10  increase: (by) => set((state) => ({ bears: state.bears + by })),
11}))
12
13// In component - select only what you need
14const bears = useBearStore((state) => state.bears)
15const increase = useBearStore((state) => state.increase)

State Updates

typescript
1// Flat updates (auto-merged at one level)
2set({ bears: 5 })
3set((state) => ({ bears: state.bears + 1 }))
4
5// Nested objects (manual spread required)
6set((state) => ({
7  nested: { ...state.nested, count: state.nested.count + 1 }
8}))
9
10// Replace entire state (no merge)
11set({ bears: 0 }, true)

Selectors & Performance

typescript
1// Good - subscribes only to bears
2const bears = useBearStore((state) => state.bears)
3
4// Bad - rerenders on any change
5const state = useBearStore()
6
7// Multiple values with useShallow (prevents rerenders with shallow comparison)
8import { useShallow } from 'zustand/react/shallow'
9
10const { bears, fish } = useBearStore(
11  useShallow((state) => ({ bears: state.bears, fish: state.fish }))
12)
13
14// Array destructuring also works
15const [bears, fish] = useBearStore(
16  useShallow((state) => [state.bears, state.fish])
17)

Access Outside Components

typescript
1// Get current state (non-reactive)
2const state = useBearStore.getState()
3
4// Update state
5useBearStore.setState({ bears: 5 })
6
7// Subscribe to changes
8const unsub = useBearStore.subscribe((state) => console.log(state))
9unsub() // unsubscribe

Vanilla Store (No React)

typescript
1import { createStore } from 'zustand/vanilla'
2
3const store = createStore((set) => ({
4  bears: 0,
5  increase: (by) => set((state) => ({ bears: state.bears + by })),
6}))
7
8store.getState().bears
9store.setState({ bears: 10 })
10store.subscribe((state) => console.log(state))

Additional Documentation

• Middleware: See references/middleware.md for persist, devtools, immer
• Patterns: See references/patterns.md for slices, testing, best practices
• TypeScript: See references/typescript.md for advanced typing patterns

Key Patterns