Zustand：Reactの状態を小さなストアとして組み立てる

createで始めるストアの形

ZustandはREADMEで、簡素化されたflux原則を使った小型で高速、拡張可能な最小限の状態管理ソリューションと説明されています。APIはフックベースで、ボイラープレートや意見に左右されることはないとされています。また、ゾンビ子問題、Reactの並行処理、混合レンダラー間のコンテキスト喪失などの一般的な落とし穴に対処するために時間を費やしたと述べられています。インストールコマンドは`npm install zustand`で、ライブデモとドキュメントへのリンクがあります。リポジトリはTypeScriptで書かれ、pmndrsの下でホストされ、説明は「Bear necessities for state management in React」です。

pmndrs/zustandについて、README の zustand、create、useShallow、persist、createStore、package.json に関する説明と、実際に生成された設定または出力を照合します。

セレクターが再レンダー範囲を決める

コアAPIは`create`で、`set`と任意の`get`を受け取る関数を取り、初期状態を返します。READMEの例では、`bears`、`increasePopulation`、`removeAllBears`を含むストアを定義し、`set`はデフォルトで状態をマージします。結果のストアはフックであり、プロバイダなしで使用できます。コンポーネントをバインドするには、セレクターを付けてフックを呼び出し、選択された値が変わったときだけコンポーネントが再レンダリングされます。READMEは、`useBearStore()`で全体の状態を取得すると、状態が変わるたびにコンポーネントが更新されると警告しています。複数の選択には、`useShallow`を使用すると、セレクター出力が浅い等価の場合に不要な再レンダリングを防げます。

pmndrs/zustandについて、導入時は zustand、create、useShallow、persist、createStore、package.json の版と配置を記録し、記載されていない既定値を推測しません。

ミドルウェアと永続化の責任

非リアクティブなアクセスのために、ストアフックは`getState`、`setState`、`subscribe`を公開しています。READMEでは、最新の状態を読む方法、すべての変更をリッスンする方法、購読解除する方法が示されています。`subscribeWithSelector`ミドルウェアは、`equalityFn`や`fireImmediately`などのオプションを持つセレクターシグネチャを追加します。一時更新は、`useEffect`内で購読しrefを変更することで処理され、再レンダリングを回避します。ZustandはReactなしでも実行できます。`zustand/vanilla`の`createStore`は`getState`、`setState`、`subscribe`、`getInitialState`を返し、`useStore`フックはバニラストアをReactにバインドします。READMEは、`set`や`get`を変更するミドルウェアは`getState`と`setState`には適用されないと述べています。

pmndrs/zustandについて、実行に失敗した場合は zustand、create、useShallow、persist、createStore、package.json のどの段階で止まったかをログとコマンド単位で切り分けます。

Vanilla APIとReactバインディング

READMEにはいくつかのミドルウェアが記載されています。`persist`はストアデータを任意のストレージに保存し、`createJSONStorage`と一意の名前を使用します。デフォルトでは`localStorage`を使います。`immer`ミドルウェアは`set`コールバック内で状態を直接変更できます。`redux`ミドルウェアはリデューサーを接続し、`dispatch`関数を追加します。`devtools`ミドルウェアはRedux DevTools拡張機能と統合し、ストアの命名、シリアライズオプション、カスタムアクションタイプのログ、`enabled: false`による本番環境での無効化をサポートします。また、複数のストア間で単一のdevtools接続を共有する方法も示しています。

pmndrs/zustandについて、複数環境を扱う場合は zustand、create、useShallow、persist、createStore、package.json の差分を同じ入力で比較し、未確認の対応範囲を広げません。

SSR、RSC、型定義の注意点

依存性注入やコンポーネントのpropsからストアを初期化する場合は、READMEではバニラストアとReactコンテキストの使用を推奨しています。`createStore`でストアを作成し、コンポーネント内で`useStore`を使います。TypeScriptの使用には`create<State>()(...)`が必要です。詳細なガイドへのリンクがあります。ベストプラクティスセクションでは、ストアをスライスに分割する方法、Fluxに触発されたプラクティス、テスト、pre-React 18のイベントハンドラー外でのアクション処理に関するガイドがリンクされています。サードパーティライブラリは専用のドキュメントにリストされています。

pmndrs/zustandについて、権限や外部接続が関わる場合は zustand、create、useShallow、persist、createStore、package.json が要求する範囲を確認し、不要な認証情報を入力しません。

パッケージ導入前の境界確認

READMEではzustandをreduxとcontextと比較しています。reduxに対しては、シンプルさ、フックを主な消費方法とすること、コンテキストプロバイダーが不要なこと、一時更新を挙げています。contextに対しては、ボイラープレートが少ないこと、変更時のみレンダリングすること、集中化されたアクションベースの状態を挙げています。完全な比較へのリンクがあります。プロジェクトはMITライセンスで、使用、コピー、変更、マージ、公開、配布、サブライセンス、販売の権利を許可しますが、ライセンスは保証を提供しません。READMEにはベンチマーク数値やセキュリティ保証が含まれていないため、これらのパフォーマンスと安全性の主張は定量化されていません。

pmndrs/zustandについて、採用判断では zustand、create、useShallow、persist、createStore、package.json を使う最小ケースを先に作り、出力またはエラーを README の前提と照合します。

編集部の結論

Zustand：Reactの状態を小さなストアとして組み立てるは、READMEに記載されたzustand、create、useShallow、persist、createStore、package.jsonを自分の環境で確認できる開発者や利用者に向いています。反対に、対応OS、モデル精度、転送互換性、性能を文書だけで保証してほしい場合には向きません。zustand、create、useShallow、persist、createStore、package.jsonを含む最小の入力を用意し、出力、ログ、権限要求を確認してから運用範囲を決めてください。

公式情報源

1. Official documentation
2. Official README
3. Project repository
4. Release notes