zustand

コミュニティによる Zustand のベストプラクティス

React アプリケーションで Zustand を使った状態管理を行うための、パフォーマンスとアーキテクチャに関する包括的なガイドです。8 つのカテゴリにまたがる 43 のルールを収録しており、影響度に応じて、最優先の項目（ストアアーキテクチャ、セレクターの最適化）から段階的な項目（高度なパターン）まで優先順位を付けています。

適用するタイミング

次の場合に、これらのガイドラインを参照してください。

• 新しい Zustand ストアを作成するとき
• セレクターを使って再レンダリングのパフォーマンスを最適化するとき
• 永続化やミドルウェアを実装するとき
• Zustand を SSR／Next.js と統合するとき
• 状態管理のパターンに沿ってコードをレビューするとき

優先度別のルールカテゴリ

優先度	カテゴリ	影響度	接頭辞
1	ストアアーキテクチャ	CRITICAL	store-
2	セレクターの最適化	CRITICAL	select-
3	再レンダリングの防止	HIGH	render-
4	状態の更新	MEDIUM-HIGH	update-
5	ミドルウェアの設定	MEDIUM	mw-
6	SSR とハイドレーション	MEDIUM	ssr-
7	TypeScript のパターン	LOW-MEDIUM	ts-
8	高度なパターン	LOW	adv-

クイックリファレンス

1. ストアアーキテクチャ（CRITICAL）

• store-multiple-stores - 1 つの巨大なストアではなく、小さなストアを複数使います
• store-separate-actions - 専用の名前空間でアクションと状態を分離します
• store-event-naming - アクションにはセッターではなくイベントの名前を付けます
• store-colocate-logic - アクションを、変更対象の状態と同じ場所に配置します
• store-avoid-derived-state - 計算値は保存せずに導出します
• store-domain-boundaries - 機能ドメインごとにストアを整理します

2. セレクターの最適化（CRITICAL）

• select-always-use - ストア全体を購読せず、常にセレクターを使います
• select-atomic-picks - 単一の値にはアトミックセレクターを使います
• select-stable-returns - セレクターが安定した参照を返すようにします
• select-custom-hooks - ストアそのものではなく、カスタムフックをエクスポートします
• select-auto-generate - 大規模なストアには自動生成セレクターを使います
• select-memoize-computed - 処理コストの高い計算セレクターをメモ化します
• select-avoid-inline - セレクターはコンポーネントの外で定義します

3. 再レンダリングの防止（HIGH）

• render-use-shallow - 複数のプロパティを選択する場合は useShallow を使います
• render-equality-fn - 必要に応じてカスタム等価関数を指定します
• render-memo-children - 親のストア更新の影響を受ける子コンポーネントをメモ化します
• render-subscribe-external - React 以外のコンシューマーには subscribe を使います
• render-avoid-object-returns - セレクターから新しいオブジェクトを返すのを避けます
• render-split-components - 購読の範囲を最小限にするため、コンポーネントを分割します

4. 状態の更新（MEDIUM-HIGH）

• update-functional-set - 以前の状態に基づいて更新する場合は、関数形式を使います
• update-immutable - 状態を直接変更してはいけません
• update-shallow-merge - set() の浅いマージの動作を理解します
• update-async-actions - ローディング状態とエラー状態を使って非同期アクションを処理します
• update-batch-updates - 関連する更新を 1 回の set 呼び出しにまとめます

5. ミドルウェアの設定（中）

• mw-devtools-actions - DevTools のデバッグ用にアクションに名前を付けます
• mw-persist-partialize - partialize を使用して、選択的に永続化します
• mw-persist-migration - 永続化された状態をバージョン管理し、移行します
• mw-immer-nested - 深くネストされた状態を更新する際に immer を使用します
• mw-combine-order - ミドルウェアを正しい順序で適用します
• mw-slice-middleware - 結合されたストアのレベルでミドルウェアを適用します

6. SSR とハイドレーション（中）

• ssr-skip-hydration - SSR のコンテキストで skipHydration を使用します
• ssr-manual-rehydrate - クライアントのマウント時に手動で再ハイドレーションします
• ssr-hydration-hook - ハイドレーションの不一致を防ぐためにカスタムフックを使用します
• ssr-check-window - typeof window チェックでブラウザー API の使用をガードします

7. TypeScript のパターン（低〜中）

• ts-state-creator - スライスの型付けに StateCreator を使用します
• ts-middleware-inference - ミドルウェアを使用しても型推論を維持します
• ts-separate-types - 状態とアクションのインターフェースを分けます
• ts-generic-selectors - 再利用できるようセレクターに型を付けます
• ts-bound-store - 結合されたストアに正しく型を付けます

8. 高度なパターン（低）

• adv-context-stores - Zustand と React Context を組み合わせて依存性を注入します
• adv-transient-updates - 一時的な更新に subscribe を使用します
• adv-computed-getters - ゲッターで計算済みの状態を実装します
• adv-third-party-integration - React Query と SWR を統合します

使用方法

詳しい説明とコード例については、各リファレンスファイルをお読みください。

• セクションの定義 - カテゴリーの構成と影響度
• ルールのテンプレート - 新しいルールを追加するためのテンプレート

リファレンスファイル

ファイル	説明
references/_sections.md	カテゴリーの定義と順序
assets/templates/_template.md	新しいルール用のテンプレート
metadata.json	バージョンとリファレンス情報