【React】状態管理の選択肢（「Hooks」、「Redux」、「React Query」）

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を使ったこちらの選択肢でも良いでしょう。再レンダリングの対策に工数がかかります。