zustand-store-patterns

Zustand - Store Patterns

Zustand is a small, fast, and scalable state management solution for React. It uses a simplified flux principles with a hooks-based API.

Key Concepts

Store Creation

A Zustand store is created using the create function:

import { create } from 'zustand'

interface BearStore {
  bears: number
  increasePopulation: () => void
  removeAllBears: () => void
}

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

Using the Store in Components

function BearCounter() {
  const bears = useBearStore((state) => state.bears)
  return <h1>{bears} around here...</h1>
}

function Controls() {
  const increasePopulation = useBearStore((state) => state.increasePopulation)
  return <button onClick={increasePopulation}>Add bear</button>
}

State Updates

Zustand provides two ways to update state:

// Replace state
set({ bears: 5 })

// Merge state (shallow merge)
set((state) => ({ bears: state.bears + 1 }))

Best Practices

1. Use Selectors for Performance

Select only the state you need to prevent unnecessary re-renders:

// ❌ Bad: Component re-renders on any state change
function BadComponent() {
  const store = useBearStore()
  return <div>{store.bears}</div>
}

// ✅ Good: Component only re-renders when bears changes
function GoodComponent() {
  const bears = useBearStore((state) => state.bears)
  return <div>{bears}</div>
}

2. Separate Actions from State

Keep your store organized by separating data from actions:

interface TodoStore {
  // State
  todos: Todo[]
  filter: 'all' | 'active' | 'completed'

  // Actions
  addTodo: (text: string) => void
  toggleTodo: (id: string) => void
  removeTodo: (id: string) => void
  setFilter: (filter: TodoStore['filter']) => void
}

const useTodoStore = create<TodoStore>((set) => ({
  todos: [],
  filter: 'all',

  addTodo: (text) =>
    set((state) => ({
      todos: [...state.todos, { id: Date.now().toString(), text, completed: false }],
    })),

  toggleTodo: (id) =>
    set((state) => ({
      todos: state.todos.map((todo) =>
        todo.id === id ? { ...todo, completed: !todo.completed } : todo
      ),
    })),

  removeTodo: (id) =>
    set((state) => ({
      todos: state.todos.filter((todo) => todo.id !== id),
    })),

  setFilter: (filter) => set({ filter }),
}))