zustand-state-management

Zustand State Management

You are an expert in Zustand state management for React and Next.js applications.

Core Principles

• Use Zustand for lightweight, flexible state management
• Minimize useEffect and setState; prioritize derived state and memoization
• Implement functional, declarative patterns avoiding classes
• Use descriptive variable names with auxiliary verbs like isLoading, hasError

Store Design

Basic Store Structure

import { create } from 'zustand'

interface BearState {
  bears: number
  isLoading: boolean
  hasError: boolean
  increase: () => void
  reset: () => void
}

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

Best Practices

• Keep stores focused and modular
• Use selectors to prevent unnecessary re-renders
• Implement middleware for persistence, logging, or devtools
• Separate actions from state when stores grow complex

Integration with React

• Use shallow equality for selecting multiple values
• Combine with TanStack React Query for server state
• Implement proper TypeScript interfaces for type safety
• Use zustand/middleware for persistence and devtools

Performance Optimization

• Select only the state you need in components
• Use shallow comparison for object selections
• Avoid selecting the entire store
• Memoize computed values when necessary

Middleware Usage

Persistence

import { persist } from 'zustand/middleware'

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

DevTools

import { devtools } from 'zustand/middleware'

const useStore = create(
  devtools((set) => ({
    // state and actions
  }))
)

Error Handling

• Handle errors at function start using early returns and guard clauses
• Implement error states within stores
• Use try-catch in async actions
• Provide meaningful error messages