Hooks
メリット
- Reactの標準機能なので導入が楽。
- useReducerのReducer関数は純粋なJavaScriptのコードなので単体テストが楽
デメリット
- 全てのReducerを一つのStoreに格納できるわけではない。
- 再レンダリングの対策に工数がかかる。
Redux
メリット
- 全てのReducerをcombineして一つのstoreに格納する。
- Reduxにはしっかりとした設計原則がある。
- Redux devtoolが高機能で開発効率が上がる。
- Redux-sagaを使うことで保守性の高いコードを記述できる。
- Redux Tool Kitを使うことで再レンダリングの対策が簡単
デメリット
- React標準ではないので別途導入が必要。
- 記述が分断されているので処理を追うのが大変(他人が書いたActionやReducerを一通り追って理解しなければならないのはきつい。)
HooksとReduxを用いた状態管理の選択肢
useState + useReducer + useContext + combineReducer(Redux)
こうすることでHooksがベースでもReduxに近いことが実現できます。比較的小規模アプリで導入されます。
useState
全ての状態管理をReduxで行うのではなく、例えばユーザーの画面入力などの簡易的な状態の保持ではuseStateを使ったりします。
近年(2020年以降)の選択肢
従来は、アプリケーションデータ(APIにフェッチしないデータ、例えば、ボタンの状態など)と、サーバーデータ(APIにフェッチするデータ、例えば、タスク一覧情報)どちらも同じstoreで管理する設計が普通でした。今後はこの二つを分けて考えていく必要があります。また、ReduxやuseContextはどちらもキャッシュの機能を持っていません。
サーバーデータ保持
React Query
サーバーデータに関してはReduxを使わずにReact Queryに任せるという選択肢が出てきました。Reduxと違ってキャッシュの機能を持っています。離れたコンポーネントでもcache経由でデータを共有することができます。
- APIとキーが独立している。
- 戻り値でisLoadingがある。
- デバッグツール(ReactQueryDevTool)がある。
useSWR
Next.jsを導入する場合に選択肢として挙がります。
- キーがAPIを実行するためのパラメータになっている。
- 戻り値でisLoadingがない
- デバッグツールはない。
アプリデータ保持
Redux ToolKit
近年は、Reduxをそのまま使うというよりはより使いやすくなったRedux ToolKitでの状態保持が主流となりつつあります。useContextを使う場合に比べて再レンダリングの対策も簡単です。
useState or useReducer + useContext
React Hooksを使ったこちらの選択肢でも良いでしょう。再レンダリングの対策に工数がかかります。
この記事へのコメントはありません。