zustand

Zustand State Management

Zustand is a small, fast, scalable state management solution for React. This skill covers store creation, TypeScript patterns, middleware, and performance optimization.

Core Concepts

Basic Store Creation

import { create } from 'zustand'

interface BearStore {
  bears: number
  increase: () => void
  reset: () => void
}

const useBearStore = create<BearStore>((set) => ({
  bears: 0,
  increase: () => set((state) => ({ bears: state.bears + 1 })),
  reset: () => set({ bears: 0 }),
}))

Using in Components

// Select specific state (prevents unnecessary re-renders)
const bears = useBearStore((state) => state.bears)
const increase = useBearStore((state) => state.increase)

// Multiple selectors - use useShallow for object selections
import { useShallow } from 'zustand/react/shallow'
const { bears, increase } = useBearStore(
  useShallow((state) => ({ bears: state.bears, increase: state.increase }))
)

References

For detailed patterns and advanced usage, load the appropriate reference:

Topic	Reference	Use When
Store patterns	references/store-patterns.md	Creating stores, TypeScript setup, slice pattern, combining stores
Middleware	references/middleware.md	persist, devtools, immer, subscribeWithSelector, custom middleware
React integration	references/react-integration.md	Selectors, avoiding re-renders, subscriptions, context usage
Async & testing	references/async-testing.md	Async actions, data fetching, loading states, testing patterns

Quick Patterns

Accessing State Outside React

// Get current state
const bears = useBearStore.getState().bears

// Subscribe to changes
const unsub = useBearStore.subscribe((state) => console.log(state.bears))

// Update state
useBearStore.setState({ bears: 10 })

Common Middleware Stack

import { create } from 'zustand'
import { devtools, persist } from 'zustand/middleware'
import { immer } from 'zustand/middleware/immer'

const useStore = create<Store>()(
  devtools(
    persist(
      immer((set) => ({
        // state and actions
      })),
      { name: 'store-key' }
    )
  )
)

When to Load References

• Creating a new store: Load store-patterns.md for TypeScript setup and organization
• Adding persistence/devtools: Load middleware.md for middleware configuration
• Performance issues: Load react-integration.md for selector optimization
• Async data fetching: Load async-testing.md for async patterns and loading states
• Writing tests: Load async-testing.md for testing patterns