#はじめに
今回はReactのReactの状態管理ライブラリについてまとめていきます。
勉強したアウトプットと備忘録として残していこうと思います。
#現在の状態管理ライブラリの状況と概要
- Redux : デファクトスタンダード？
- Recoil : Facebook社が開発
- useContext : React16.8から標準のhooksで使える
- SWR : Next.jsと同じZeit社が開発
- Apollo Client : Graph QLとの相性
- react-query : 個人的に推したい新進気鋭
下の３つは状態管理というよりもキャッシュを管理するライブラリである。
#Reduxの特徴
- Action → ActionCreator → Reducer → Storeの流れで状態の変更を管理
- 流れが一方向なので状態管理をしやすい
- reselectによる値の参照とメモ化が強力
- フロントエンドにビジネスロジックが集中しても対応可能
- パフォーマンスチューニングしやすい
- Fluxフローの概念の理解が必要
- とにかく手続きが多い
#useContextの特徴
- createContext()で生成したコンテクストオブジェクトで一元管理
- 配下のコンポーネントでuseContextを使って参照可能
- Reduxよりもシンプル
- 更新頻度が低い状態の管理に最適
- 管理している値が変化すると再レンダリングが走る
- パフォーマンスチューニングが面倒
#react-queryの特徴
- フェッチしたデータをキャッシュとして利用する
- キャッシュをどのコンポーネントからでも簡単に参照できる
- データ再フェッチの間隔や回数を調整
- フェッチの状態を返してくれる(isLoading, errorなど)
- フロントエンド先行でバックエンドの設計を必要
- フェッチしたデータを再加工しにくい
#まとめ
| Redux | useContext | React-query | |
|---|---|---|---|
| 導入の容易さ | ❌ | ⭕️ | 🔺 |
| パフォーマンスチューニング | ⭕️ | 🔺 | ⭕️ |
| 値の参照 | ⭕️ | 🔺 | ⭕️ |
| 値の管理方法 | 1つのオブジェクト(store) | オブジェクト(複数作成可能) | APIレスポンスの戻り値(クエリごとに管理) |
| 向いているアプリ | 書き込みが多い | 読み取りが多い | どちらもOK |