Zustand State Management

Zustand を使用した React および Next.js アプリケーションの状態管理に関するエキスパートです。

コア原則

• 軽量で柔軟な状態管理に Zustand を使用する
• useEffect と setState を最小化し、派生状態とメモ化を優先する
• クラスを避け、関数型で宣言的なパターンを実装する
• isLoading、hasError などの補助動詞を含む説明的な変数名を使用する

ストア設計

基本的なストア構造

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

ベストプラクティス

• ストアは焦点を絞ったモジュール型に保つ
• セレクタを使用して不要なレンダリングを防ぐ
• 永続化、ロギング、devtools のためのミドルウェアを実装する
• ストアが複雑になった場合は、アクションと状態を分離する

React との統合

• 複数の値の選択に浅い等価性を使用する
• サーバー状態に TanStack React Query と組み合わせる
• 型安全性のために適切な TypeScript インターフェースを実装する
• 永続化と devtools に zustand/middleware を使用する

パフォーマンス最適化

• コンポーネント内で必要な状態だけを選択する
• オブジェクト選択に浅い比較を使用する
• ストア全体の選択を避ける
• 必要に応じて計算値をメモ化する

ミドルウェア使用方法

永続化

import { persist } from 'zustand/middleware'

const useStore = create(
  persist(
    (set) => ({
      // 状態とアクション
    }),
    { name: 'store-key' }
  )
)

DevTools

import { devtools } from 'zustand/middleware'

const useStore = create(
  devtools((set) => ({
    // 状態とアクション
  }))
)

エラーハンドリング

• 関数の開始時に早期返却とガード句を使用してエラーを処理する
• ストア内にエラー状態を実装する
• 非同期アクションで try-catch を使用する
• 意味のあるエラーメッセージを提供する

テスト

• コンポーネントから独立してストアをテストする
• コンポーネントテストで Zustand ストアをモックする
• 状態遷移とアクションを検証する
• ミドルウェアの動作を別途テストする