zustand-state

Zustand の状態管理

最小限の状態管理です。プロバイダーは不要で、ボイラープレートも最小限です。

クイックリファレンス

import { create } from 'zustand'

interface BearState {
  bears: number
  increase: (by: number) => void
}

const useBearStore = create<BearState>()((set) => ({
  bears: 0,
  increase: (by) => set((state) => ({ bears: state.bears + by })),
}))

// In component - select only what you need
const bears = useBearStore((state) => state.bears)
const increase = useBearStore((state) => state.increase)

状態の更新

// Flat updates (auto-merged at one level)
set({ bears: 5 })
set((state) => ({ bears: state.bears + 1 }))

// Nested objects (manual spread required)
set((state) => ({
  nested: { ...state.nested, count: state.nested.count + 1 }
}))

// Replace entire state (no merge)
set({ bears: 0 }, true)

セレクターとパフォーマンス

// Good - subscribes only to bears
const bears = useBearStore((state) => state.bears)

// Bad - rerenders on any change
const state = useBearStore()

// Multiple values with useShallow (prevents rerenders with shallow comparison)
import { useShallow } from 'zustand/react/shallow'

const { bears, fish } = useBearStore(
  useShallow((state) => ({ bears: state.bears, fish: state.fish }))
)

// Array destructuring also works
const [bears, fish] = useBearStore(
  useShallow((state) => [state.bears, state.fish])
)

コンポーネント外からのアクセス

// Get current state (non-reactive)
const state = useBearStore.getState()

// Update state
useBearStore.setState({ bears: 5 })

// Subscribe to changes
const unsub = useBearStore.subscribe((state) => console.log(state))
unsub() // unsubscribe

Vanilla ストア（React なし）

import { createStore } from 'zustand/vanilla'

const store = createStore((set) => ({
  bears: 0,
  increase: (by) => set((state) => ({ bears: state.bears + by })),
}))

store.getState().bears
store.setState({ bears: 10 })
store.subscribe((state) => console.log(state))

追加ドキュメント

• ミドルウェア：persist、devtools、immer については references/middleware.md を参照してください
• パターン：スライス、テスト、ベストプラクティスについては references/patterns.md を参照してください
• TypeScript：高度な型付けパターンについては references/typescript.md を参照してください

主なパターン

パターン	使用する場面
単一のセレクター	必要な状態が 1 つの場合
useShallow	複数の値を取得し、再レンダリングを避けたい場合
getState()	React の外部やイベントハンドラーで使用する場合
subscribe()	外部システムとの連携やログ記録に使用する場合
Vanilla ストア	React 以外の環境で使用する場合

ゲート（persist と devtools）

これらのミドルウェアを使用するコードをマージする前に、次の点を確認してください（セットアップについては references/middleware.md を参照してください）。

1. persist — 合格条件： 永続化するキーが明示されていること（partialize を使用するか、レビュー済みの全状態スナップショットを使用すること）。また、ストレージに書き込まれる JSON に認証トークン、API キー、その他のシークレットが含まれないこと。
2. リリースバンドルでの devtools — 合格条件： DevTools が開発環境でのみ実行される（環境変数によるゲート制御がある）こと。または、本番環境でも有効にしておく理由を説明する 1 行のメモを PR に残すこと。