Zustand（ツーシュタント）はドイツ語で「状態」を意味する単語をそのまま名前にした、Reactアプリ向けの軽量な状態管理ライブラリです。オープンソースコレクティブ「Poimandres（pmndrs）」のDaishi Katoらが2019年に公開し、「create関数1つでストアを作れる」という極限まで簡素化されたAPIが支持を集めました。Reduxのようなボイラープレートを必要とせず、Context APIを使わないためレンダリング最適化も容易で、中小規模のReactアプリやNext.jsプロジェクトで急速に採用が拡大しているライブラリです。
この記事の目次
- createとフックの2要素だけ
- Poimandresが2019年に公開
- Next.jsアプリでの典型用途
- ReduxやJotaiとの違い
- まとめ
createとフックの2要素だけ
Zustandの中核API はたった1つで、create関数にストアの初期状態と更新関数を返すクロージャを渡すだけで、そのストアにアクセスするためのカスタムフックが返ってきます。コンポーネント側はそのフックを呼び出し、必要な部分だけセレクタで取り出して購読することで、関係のない状態変更による再レンダリングを自動的に避けられる仕組みになっています。アクション、リデューサー、ディスパッチといった概念は登場せず、setで直接状態を書き換えます。
Reduxと違いContext APIを内部で使わないため、プロバイダで上位コンポーネントをラップする必要がなく、サーバーサイドレンダリング（SSR）との相性も良好です。ミドルウェアの仕組みもあり、persistでlocalStorageへ自動保存、devtoolsでRedux DevToolsとの連携、immerでイミュータブル更新の簡略化などをワンライナーで足せます。シンプルでありながら、必要な拡張性は揃っているのがZustandの設計上のバランスです。
Poimandresが2019年に公開
Zustandは2019年、Three.js向けReactレンダラ「React Three Fiber」の作者でもあるPaul Henschel（@0xca0a）と、JotaiでもおなじみのDaishi Kato（加藤大志）らが集まったオープンソース集団「Poimandres」によって公開されました。PoimandresはReact向けのライブラリを多数発表しており、3D表示のR3F、状態管理のJotai／Valtio／Zustandなど、React界の「軽量ライブラリの宝庫」として知られるグループです。
Zustandが急成長したのは、Next.jsの普及と時期が重なったことが大きな要因です。App Routerが登場した2022年以降、サーバーコンポーネントとクライアントコンポーネントを行き来する設計のなかで、「クライアント側で軽く状態を持ちたい」需要が膨らみ、ProviderレスでSSRに強いZustandが選ばれるケースが急増しました。GitHubスター数も着実に伸び、今やReactエコシステムにおける状態管理の代表格の1つになっています。
Next.jsアプリでの典型用途
Zustandは「中規模までのクライアント状態を、できるだけ簡単に管理したい」場面に最適です。テーマ切替、モーダルの開閉、サイドメニューの展開状態、トースト通知のキューなど、コンポーネント横断で参照する小さな状態をいくつも抱えるNext.jsアプリでよく採用されます。persistミドルウェアでlocalStorageと自動同期させれば、リロード後もユーザー設定が保たれる挙動を数行で実現できます。
ECサイトのショッピングカートやお気に入りリストのようにユーザーごとの永続データを扱うケースでも、サーバ状態はTanStack QueryやSWRに任せ、クライアント状態だけZustandで持つという棲み分けが定番です。ウィザード型のフォームで段階的に状態を積み上げる用途や、エディタアプリの「現在選択中のツール／レイヤー」のような、Reactツリーのあちこちから読み書きされる小ぶりな状態を保管する用途で、Zustandは特に威力を発揮します。
ReduxやJotaiとの違い
Reduxと比べてZustandは、アクションタイプの定義もリデューサーの分割も不要で、ストア定義から実利用までほぼ10行で完結します。ただしDevToolsでのアクション履歴表示や厳格な一方向データフローの強制力ではReduxに譲るため、大規模チームでの統制が必要な場合はReduxやRedux Toolkitが選ばれることが今も多い構図です。
同じPoimandres傘下のJotai／Valtioは設計思想が異なります。Jotaiは「atom（原子）」単位で状態を分割して購読粒度を細かくする発想、ValtioはJavaScript Proxyを使ってミューテーション風に書ける手軽さが特徴です。対するZustandは「中央集約だがProvider不要」という、ReduxとJotaiの中間的なポジションを取っており、「Reduxほど厳密でなくても良いが、状態がアプリ全体に散らばってほしくない」場面で最もフィットします。
まとめ
ZustandはPoimandresが2019年に公開した、極限まで簡素化されたReact向け状態管理ライブラリです。Provider不要・ボイラープレート皆無というシンプルさは中小規模アプリやNext.js案件と相性が良く、ReduxとJotaiの中間に位置するバランスの良い選択肢として、現在のフロントエンド開発で広く採用されています。
※本記事はIT用語辞典の手書きドラフトです。公開前に最新情報・出典を確認のうえ加筆修正してください。
コメント