Reactの状態管理ライブラリを比較してベストな選択をしよう！
どうもReactおじさんです。
昨今のReact、Next.jsの進化の早さにはとても驚いています。
それはReactに追従するライブラリも同様です。
特にReactの状態管理ライブラリは戦国時代を迎え、様々な状態管理ライブラリが台頭してきました。
今回はライブラリの紹介、これから使用されていくであろう物にフォーカスして自分なりにまとめてみようと思います。
※2022年版に更新しました。
結局、状態管理ライブラリは何が人気なのか？？
JavaScript Rising StartsのState Management部門(2022)とnpm trendsを見ていきましょう。
JavaScript Rising Starts
※ JavaScript Rising StartsとはGithubのスター数でのランキングをまとめたもの(2022/1/4現在)
npm trends
※ npm trendsとはnpmからダウンロードされたパッケージの数をグラフ表示出来るもの(2022/11/2時点)
2022年版JavaScript Rising StartsではZustandが圧倒的な人気で一位を獲得しています。
自分が予想していた通り、JotaiがRecoilを抜かして堂々の3位になりましたね。
そして僕が推しているValtioもReduxを抜いて6位まで上がってきました。
今年度中にはRecoilを抜くと思われます。
一転、npm trendsでは70万ダウンロードされているReduxが圧勝。
Zustandなどはまだまだこれからって感じですね、、
Reduxは10年前くらいからあったのでダウンロード数が多いが、最近では他のライブラリの勢いが増してきて人気が落ちてきていますね。
では、次にStore・Atomベースについて解説し、各ライブラリの情報を見ていきたいと思います。
Storeベースの状態管理ライブラリ
まず最初にStoreベースとは何か図で解説していきます。
青丸はコンポーネントになります。
Storeベースとは状態をStoreという一つのオブジェクトとして管理し、各コンポーネントから参照できることを言います。
よく使われるライブラリとしてRedux、Zustandなどがあります。
Redux
- Facebook(現Meta)社が提唱している、Fluxアーキテクチャを採用している
- 単一方向にデータが流れていくので、データの流れを追従しやすくなる
- 大規模なアプリではより堅牢化できるので力を発揮できる
- Action、Dispatch、Reducer、Storeなどファイルを分割して管理するのが一般的でファイル数が増加するのが問題
- 恐らく一番最古残でシェア率が高い状態管理ライブラリ
- Reduxで非同期処理を実現させるには、別でmiddllewareライブラリ(redux-thunk、redux-saga)を導入した方がいい。
- どうしても初学者には学習コストが高くなってしまう。
- Redux DevToolsというChromeの拡張機能があり、状態の変更を画面で確認できる
オススメ度: ★★☆☆☆
状態管理の流れを単一方向の流に絞れるのでバグが発生する可能性を大幅に削減できます。
しかし、ファイル数の増加や、複雑になってくることが多いため個人的にはあまり使用したくないです。
最近は、新規開発で導入するところはあまり見なくなってきて、脱Reduxが進んでいます。
Storeに全データをぶち込む人とは仲良くできそうにありません。笑
Zustand
公式: https://zustand-demo.pmnd.rs/
- 公式のクマさん(?)が可愛いです
- Reduxのようなボイラーテンプレートを作成する必要がなく簡潔に記述できる(Redux-Toolkitをさらに簡潔にした感じ)
- Redux DevToolsにも対応している
- Reduxを理解している人だと、学習コストがほぼかからない
- サイズがめちゃくちゃ軽い
- 一応Storeが複数作れるらしい
オススメ度: ★★★★☆
個人的には結構オススメな状態管理ライブラリ。
公式のクマさんが可愛過ぎて推しているところもあります。
Storeが複数作れるので完全なStoreベースとは言えませんが一応括りはここに入れておくことに。
StoreベースとAtomベースの中間地点だと認識してもらえると幸いです。
Reduxをさらにコンパクトにしたもので、Reduxから置き換える時に学習コストがほぼかからないのでオススメの一品。
読み方はドイツ語で「チュースタンド」と読むらしいです。
Atomベースの状態管理ライブラリ
次にAtomベースについて解説していきます。
Atomベースとは、Storeベースとは異なり複数のAtomで状態管理を行うことを言います。
各コンポーネントから複数のAtomを参照できる形になります。
必要であれば間にSelectorを挟み、Atomのデータを加工してそちらからも参照可能です。
よく使われるライブラリとしてRecoil、Jotaiなどがあります。
Recoil
- Meta社が開発した状態管理ライブラリ
- 大きく分けてAtom、Selectorという概念がある
- 基本はAtomのみで状態管理は完結できる
- Atomが状態管理を行う部分、SelectorはAtomから派生させたい値を作りたい時とかに利用できる
- Atomを一つにまとめてReduxのStoreのように扱うこともできる
- Recoil Dev Toolsがあり、Atomの状態を確認できる
- hooksのuseStateの様な形式でAtomから状態を参照できる
オススメ度: ★★★☆☆
Meta社が開発した状態管理ライブラリ。
まだ正式リリースではないので今後破壊的変更が入る可能性があるが、最近は開発現場でよく使用されている印象があります。
状態を一意のkeyを使って管理するので、uuidなどを使用しkeyが被らないようにするのが良いです。
(勉強会で教えてもらった)
パッケージサイズがやたらと重いので複雑な状態管理が必要でなければこの後出てくるJotaiでも良い気がします。
バックグラウンドがMeta社なので将来性は期待できそうです！
Jotai
- ほぼRecoilと一緒(Recoilより簡潔に記述できる)
- 基本Atomが状態管理を行う部分。Selector的なものはないがRecoilと同じでSelectorとほぼ同等のものが作れる
- Redux DevToolsが使用できる
- Twitterでのサポートが熱い(Jotai Friends)
オススメ度: ★★★★☆
作者は日本人なので日本語の情報が豊富で公式ドキュメントも詳細に記載されている。
JotaiはRecoilの思想に強く影響を受けており、ほぼRecoilと同じ書き方ができる。
個人的にはパッケージサイズも小さく、React Hooksを学んでいる人であれば学習コストがほぼかからないのでオススメです。
まとめ
ここまで人気が高い状態管理ライブラリを紹介してきました。
色々調査した中で、個人的な所感も含め記載してきましたが、Atomベースは状態管理を複数のAtomで行うためしっかり管理しないとカオスなコードが生まれそうな予感がしました。
どちらにしろ状態管理ライブラリを扱うには設計が命になってくるので、個人のプロジェクトにあったものをできるだけ正確に選定する力が必要になってくるなと思います。
ちなみに筆者は紹介したライブラリ全て使用した経験がありますが、一番使いやすいなと思ったのはJotaiでした。
他にもSWRやReact Queryなどで状態管理する方法もありますが今回は省いています。
今後はRedux、Zustandなどの記事も書いていこうと思います。
あくまで個人の所感なので間違っている部分があればTwitterなどでDMください。
Valtio使ってみたい、、