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

Testing

• •Test stores independently of components
• •Mock Zustand stores in component tests
• •Verify state transitions and actions
• •Test middleware behavior separately