昨日(PaPaPointアプリ【景品交換機能編①】)Propsのバケツリレーでしんどかったので,本格的に状態管理について考えてみようかと思います。

状態管理候補

• ContextAPI(React標準機能)
• Redux(言わずとしれた状態管理ライブラリ)
• Recoil(最近流行りつつあるっぽいFacebook製ライブラリ)

ContextAPI

• 小規模向け
• 複雑なアプリには向いていない
• 頻繁に更新･変更されるデータには向いていない
• シンプル故に独自ルールが必要になることもある
• Reduxへの移行も比較的楽にできる
• Contextの場合,データが変更されても再レンダリングされない？

Redux

• 大規模向け
• 小さいプロダクトにはオーバスペックになりがち
• 記述量が増えるが役割をしっかりと区分できて堅牢につくる事ができる
• 学習コスト高め

Recoil

• Facebook製
• 実験的なライブラリ
• シンプル
• Hooksと相性が良いらしい
• ReduxのstoreがRecoilのAtomに相当するのかな？
• storeが中央集約的なのに対してAtomは局所的

どうする？

基本的には規模感(どのデータを更新する必要があるか,どれくらいの頻度で更新する必要があるか)によって選定したらいいっぽい。
今作ってるアプリは保持するのも数個のデータで済みそうだから順当に行けばContextApiかなーと思うけど。。。
ただ,データ変更されても再レンダリングされないのは気になる。
setStateのステートを持たしてそれが呼ばれれば再レンダリングしてくれるかな？

一つに決めなくてもいいかも？
静的な状態 → Context
動的な状態 → Redux or Recoil
みたいに適材適所で取り入れるのもありかもしれない。
んーでも,一気に複数取り入れると絶対わけわからなくなるから1つずつ取り入れた方がいい気もする。

やっぱり状況によって徐々に取り入れていくのがいいかなー
context → context + useReducer → Redux or Recoil

まとめ

Reduxについても,Recoilについても調べてるとキリがないのでやっぱり使ってみるしかない気がしますね。
まずは,標準機能だし,一番シンプルに使えそうなContextAPIから入って,必要になったらRedux,Recoilに手を出すようにした方が良さそう。