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 }), }))

3. Use Shallow Equality for Multiple Selectors

When selecting multiple values, use shallow from zustand/shallow :

import { create } from 'zustand' import { shallow } from 'zustand/shallow'

const useStore = create<Store>((set) => ({ nuts: 0, honey: 0, increaseNuts: () => set((state) => ({ nuts: state.nuts + 1 })), increaseHoney: () => set((state) => ({ honey: state.honey + 1 })), }))

// ✅ Using shallow comparison function Component() { const { nuts, honey } = useStore( (state) => ({ nuts: state.nuts, honey: state.honey }), shallow ) return <div>{nuts} nuts, {honey} honey</div> }

4. Organize Large Stores with Slices

For complex applications, split stores into logical slices:

interface UserSlice { user: User | null login: (credentials: Credentials) => Promise<void> logout: () => void }

interface CartSlice { items: CartItem[] addItem: (item: Product) => void removeItem: (id: string) => void clearCart: () => void }

const createUserSlice = (set: StateCreator<UserSlice>) => ({ user: null, login: async (credentials) => { const user = await api.login(credentials) set({ user }) }, logout: () => set({ user: null }), })

const createCartSlice = (set: StateCreator<CartSlice>) => ({ items: [], addItem: (product) => set((state) => ({ items: [...state.items, { ...product, quantity: 1 }], })), removeItem: (id) => set((state) => ({ items: state.items.filter((item) => item.id !== id), })), clearCart: () => set({ items: [] }), })

const useStore = create<UserSlice & CartSlice>()((...a) => ({ ...createUserSlice(...a), ...createCartSlice(...a), }))

5. Access Store Outside Components

Use getState and setState for non-reactive access:

const useBearStore = create<BearStore>((set, get) => ({ bears: 0, increasePopulation: () => set((state) => ({ bears: state.bears + 1 })), doSomething: () => { const currentBears = get().bears console.log(Current bears: ${currentBears}) }, }))

// Outside components const currentState = useBearStore.getState() useBearStore.setState({ bears: 10 })

Examples

Simple Counter Store

import { create } from 'zustand'

interface CounterStore { count: number increment: () => void decrement: () => void reset: () => void }

export const useCounterStore = create<CounterStore>((set) => ({ count: 0, increment: () => set((state) => ({ count: state.count + 1 })), decrement: () => set((state) => ({ count: state.count - 1 })), reset: () => set({ count: 0 }), }))

// Usage function Counter() { const { count, increment, decrement, reset } = useCounterStore()

return ( <div> <h1>Count: {count}</h1> <button onClick={increment}>+</button> <button onClick={decrement}>-</button> <button onClick={reset}>Reset</button> </div> ) }

Shopping Cart Store

import { create } from 'zustand'

interface CartItem { id: string name: string price: number quantity: number }

interface CartStore { items: CartItem[] addItem: (product: Omit<CartItem, 'quantity'>) => void removeItem: (id: string) => void updateQuantity: (id: string, quantity: number) => void clearCart: () => void total: number }

export const useCartStore = create<CartStore>((set, get) => ({ items: [],

addItem: (product) => set((state) => { const existingItem = state.items.find((item) => item.id === product.id)

  if (existingItem) {
    return {
      items: state.items.map((item) =>
        item.id === product.id
          ? { ...item, quantity: item.quantity + 1 }
          : item
      ),
    }
  }

  return {
    items: [...state.items, { ...product, quantity: 1 }],
  }
}),

removeItem: (id) => set((state) => ({ items: state.items.filter((item) => item.id !== id), })),

updateQuantity: (id, quantity) => set((state) => ({ items: state.items.map((item) => item.id === id ? { ...item, quantity } : item ), })),

clearCart: () => set({ items: [] }),

get total() { return get().items.reduce( (sum, item) => sum + item.price * item.quantity, 0 ) }, }))

Authentication Store

import { create } from 'zustand'

interface User { id: string email: string name: string }

interface AuthStore { user: User | null token: string | null isLoading: boolean error: string | null

login: (email: string, password: string) => Promise<void> logout: () => void checkAuth: () => Promise<void> }

export const useAuthStore = create<AuthStore>((set) => ({ user: null, token: null, isLoading: false, error: null,

login: async (email, password) => { set({ isLoading: true, error: null })

try {
  const response = await fetch('/api/login', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ email, password }),
  })

  if (!response.ok) {
    throw new Error('Login failed')
  }

  const { user, token } = await response.json()
  set({ user, token, isLoading: false })
  localStorage.setItem('token', token)
} catch (error) {
  set({
    error: error instanceof Error ? error.message : 'Login failed',
    isLoading: false,
  })
}

},

logout: () => { localStorage.removeItem('token') set({ user: null, token: null }) },

checkAuth: async () => { const token = localStorage.getItem('token') if (!token) return

set({ isLoading: true })

try {
  const response = await fetch('/api/me', {
    headers: { Authorization: `Bearer ${token}` },
  })

  if (!response.ok) {
    throw new Error('Auth check failed')
  }

  const user = await response.json()
  set({ user, token, isLoading: false })
} catch (error) {
  localStorage.removeItem('token')
  set({ user: null, token: null, isLoading: false })
}

}, }))

Common Patterns

Computed Values

Use getters for derived state:

const useStore = create<Store>((set, get) => ({ items: [],

get itemCount() { return get().items.length },

get hasItems() { return get().items.length > 0 }, }))

Async Actions

Handle async operations within actions:

const useStore = create<Store>((set) => ({ data: null, isLoading: false, error: null,

fetchData: async () => { set({ isLoading: true, error: null })

try {
  const data = await api.fetchData()
  set({ data, isLoading: false })
} catch (error) {
  set({ error: error.message, isLoading: false })
}

}, }))

Reset Store

Implement a reset action:

const initialState = { count: 0, name: '', }

const useStore = create<Store>((set) => ({ ...initialState,

increment: () => set((state) => ({ count: state.count + 1 })), setName: (name: string) => set({ name }), reset: () => set(initialState), }))

Anti-Patterns

❌ Don't Mutate State Directly

// Bad const useStore = create((set) => ({ items: [], addItem: (item) => { // DON'T mutate state directly items.push(item) }, }))

// Good const useStore = create((set) => ({ items: [], addItem: (item) => set((state) => ({ items: [...state.items, item], })), }))

❌ Don't Select the Entire Store

// Bad: Causes re-render on any state change const store = useStore()

// Good: Select only what you need const count = useStore((state) => state.count)

❌ Don't Use External State in Selectors

// Bad: Selector depends on external value const [userId, setUserId] = useState('123') const user = useStore((state) => state.users[userId])

// Good: Pass external values as arguments const getUser = (userId: string) => useStore.getState().users[userId]

❌ Don't Create Multiple Stores for Related Data

// Bad: Splitting related state across stores const useUserStore = create(...) const useUserSettingsStore = create(...) const useUserPreferencesStore = create(...)

// Good: Keep related state together const useUserStore = create((set) => ({ profile: null, settings: {}, preferences: {}, }))

Related Skills

• zustand-typescript: TypeScript integration and type safety patterns

• zustand-middleware: Using persist, devtools, and immer middleware

• zustand-advanced-patterns: Subscriptions, transient updates, and advanced techniques