zustand

Zustand

React 向けの軽量な状態管理です。プロバイダーも定型コードも不要です。ストアはフックです。

クイックスタート

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 components — select only what you need
const bears = useBearStore((state) => state.bears)

重要なルール

1. TypeScript： 型推論に必要なため、カリー化形式の create<T>()(...) を使用します
2. 不変性： 状態は不変として扱います。set が浅くマージするのは 1 階層のみです
3. セレクター： ストア全体ではなく、特定のフィールドを常に選択します。新しい参照を返す複数フィールドのセレクターには useShallow を使用します
4. ミドルウェアの順序： devtools を最も外側に配置する必要があります：devtools(persist(immer(...)))
5. Next.js： グローバルな create ではなく、createStore と Context を使ってリクエストごとにストアを作成します
6. ネストされた更新： 深いネストには Immer を、浅いネストにはスプレッド演算子を使用します

用途に応じた選択

必要なもの	解決策
基本的な React ストア	create<T>()(...)
Vanilla（React 以外）のストア	zustand/vanilla の createStore
React で Vanilla ストアを使用する	useStore(store, selector)
型を自動推論する（インターフェースなし）	combine ミドルウェア
localStorage に永続化する	persist ミドルウェア
Redux DevTools	devtools ミドルウェア
可変スタイルの更新	immer ミドルウェア
スライスを外部から購読する	subscribeWithSelector ミドルウェア
再レンダリングせずに複数のフィールドを取得する	useShallow ラッパー
大規模なストアをモジュール化する	StateCreator を使ったスライスパターン
Next.js App Router	createStore + Context + Provider
ストアをリセットする	set(initialState) または store.getInitialState()

参考資料

• API リファレンス（create、createStore、フック、shallow）：references/apis.md を参照
• TypeScript のパターン（カリー化された create、スライス、ミドルウェアの型付け、カスタムミドルウェア）：references/typescript.md を参照
• ミドルウェア（persist、devtools、immer、redux、combine、subscribeWithSelector）：references/middlewares.md を参照
• パターンとベストプラクティス（Next.js、テスト、リセット、自動セレクター、SSR、深い階層の更新）：references/patterns.md を参照