昨年7月の話になってしまいますが、スタートアップReact LTで「状態管理どうしてますか？」と題して、発表しました。
tl;dr
justInCaseTechnologiesウェブフロントエンド、2021年7月時点での大まかな方針：
- 小規模のプロダクトには Recoil / Jotai を使っていく
- 中規模以上のプロジェクトでは Redux Toolkit を使っていく
スライド
サンプルコード
github にサンプルコードを挙げています。
にそれぞれのライブラリを使ったサンプルプロジェクトが納められています。
dist ディレクトリにある index.html だけ共有していますが、基本各サンプルは独立させているので、それだけ取り出してボイラープレートのように使っていただくことも可能だと思います。
各ライブラリの感想
React Context
他のライブラリに依存せず、 React だけで完結するのは強みですが、どうしても Context を設定するための記述が必要になってしまい、状態管理という本来の目的から外れた部分の実装が目に付く印象です。
Redux Toolkit
この発表した当初は justInCaseTechnologies では Redux Toolkit を採用したプロダクト・プロジェクトはありませんでした。
個人的には別の会社で以前 Redux を使ったことはありましたが、「おまじない」が多くそれがちょっと苦痛だったりしたのですが、今回この発表をきっかけに Redux Toolkit を使ってみたら、簡潔にわかりやすく記述できるようになっていてその印象が変わりました。
MobX
justInCaseTechnologies では、他ライブラリの依存関係などもあって、当初の最新版 (v6) は利用していませんでしたが、発表では v6 でサンプルコードを組んでみました。
v4 までのデコレータを多用した実装とは異なり、すっきりとした記述での実装ができるように。一方で class を使った実装から離れていくという React のトレンドとはちょっと異なる部分もあるのでちょっとしたモヤモヤ感……。
Recoil
比較的新しい状態管理ライブラリ。 atom という単位で状態をとりまとめていくスタイル。後述する Jotai も同じようなアプローチを取っていています。
この管理の仕方、管理する状態が少なければそんなに問題にならないのですが、増えてくると追いかけるのが大変になってきます。ライブラリが軽量なのもあって取り回しは良い印象はあるのですが……。
Jotai
Recoil 同様 atom 単位で状態を管理するというコンセプトのライブラリ。Recoil よりも記述量は減る傾向にあって、比較的すっきりとした実装にすることができるとは思います。
一方で Recoil でも触れたように管理する状態そのものが増えてきて、 atom 相互の関係性が複雑になってくるときつくなる印象は否めません。
発表できなかったこと
後述の通り、時間勘違いしていて、当日は全く触れることができなかったライブラリに Zustand (ツシュタント) があります。前掲のスライドでは「おまけ」として掲載。
カスタムフックの生成関数が用意されていて、作ったフックをコンポーネントで利用するという形になっています。全然知らなかったライブラリなんですが、使い勝手は良さそうで個人的には今後どこかで本格利用してみたいとは思いました。
発表を通して
発表準備のために、今回は実際にサンプルコードを組んでみましたが、React Contextを除いて、実装面においては正直このサンプルコードの規模感では、どのライブラリも大きく変わらない印象があるのは否めません（苦笑）。
一方で実際組んでみると、それぞれのライブラリの書き味は結構違うことも分かりました。Redux は Toolkit を通して利用すると以前実装に使っていたときよりも全然印象が異なったのは大きな収穫。以前と比べて React 周辺の技術スタックに対しての知識が増えたのも大きいとは思いますが。
Recoil / Jotai / Zustand あたりは重量感を感じることもなく、さっと導入できそうな印象があり、個人的には今後もちょっと注力していきたいと思っています。
発表当初は justInCaseTechnologies で利用していなかった Redux Toolkit 、その後の開発案件で利用するものが出てきています。最初から中規模以上を目指したものなら、手続きに関する記述が安定している Redux はチームで開発するプロジェクトには向いている印象を持っています。
発表の反省
ライトニングトーク、発表枠 15 分ということで準備していましたが、直前の打ち合わせで質疑応答含めて 15 分ということが発覚して、めちゃくちゃ焦りました。
結局発表だけでほぼ 15 分使い切ってしまったのは大反省（おそらく、オーバーしていたはず）。次回からはちゃんと時間確認します……。