React.js の 状態管理 って、どんなものがあるのか比較して見てみたいな…
React.js には複数の 状態管理 方法があり、アプリの規模や用途によって最適な選択肢は異なります。
そこで今回は、React.js における代表的な状態管理手法である React Hooks、Zustand 単体、SWR + Redux Toolkit、Redux Toolkit 単体、Zustand + TanStack Query、TanStack Query + Redux Toolkit を比較し、それぞれの 特徴とプロジェクト規模や用途別のおすすめの選択肢 を整理してご紹介します。
React.js の状態管理比較表
React.js の 代表的な 状態管理の比較表 になります。※状態管理方法 がリンクになっています。
| 状態管理方法 | 管理する状態 | 規模 | 特徴 | こんなときにおすすめ |
|---|---|---|---|---|
| React Hooks (useState / useReducer / useContext) | ローカルUI状態 | 小規模 | 追加ライブラリ不要・学習コスト最小 | 個人開発、簡単なUI状態のみ |
| Zustand 単体 | グローバルUI状態 | 小〜中規模 | 軽量・Provider不要・Hooks感覚 | 複数画面でUI状態を共有したい |
| SWR + Redux Toolkit | グローバルUI状態 + 軽量API状態 | 中規模 | API取得が簡単、自動再フェッチ | APIがシンプル、一覧・詳細取得中心 |
| Redux Toolkit 単体 | グローバルUI状態 | 中規模 | 状態の責務が明確、チーム開発向き | UI状態が多いSPA、複数人開発 |
| Zustand + TanStack Query | グローバルUI状態 + API状態 | 中〜大規模 | 軽量＋低ボイラープレート、責務分離が明確 | モダン構成でスケールさせたい |
| TanStack Query + Redux Toolkit | グローバルUI状態 + 複雑API状態 | 大規模 | 高度なキャッシュ制御、拡張性最大 | 複雑API・長期運用・大規模開発 |
※補足
Zustand / Redux Toolkit は、UI・クライアント側の状態管理 を担当
（モーダル開閉、選択状態、フィルター条件など）
SWR / TanStack Query は、サーバー（API から取得するデータ）側の状態管理 を担当
（データ取得、キャッシュ、再フェッチ、ページネーションなど）
React.js 状態管理の選び方
管理する状態
- UI状態 → Zustand / Redux Toolkit / React Hooks
- API状態 → SWR / TanStack Query
規模・運用期間
- 小規模・短期
→ React Hooks / Zustand - 中規模
→ Zustand +（SWR or TanStack Query） - 大規模・長期
→ Redux Toolkit + TanStack Query / Redux Toolkit + SWR
APIの複雑さ
- シンプル → SWR
- 複雑（キャッシュ制御・無限スクロールなど）→ TanStack Query
チーム人数
- 少人数 → Zustand
- 多人数 → Redux Toolkit
まとめ
今回は、React.js における代表的な状態管理手法である React Hooks、Zustand 単体、SWR + Redux Toolkit、Redux Toolkit 単体、Zustand + TanStack Query、TanStack Query + Redux Toolkit を比較してご紹介しました。
それぞれの 状態管理方法 の 詳しい使い方やサンプルコード については、各リンク先の記事をご確認ください。
【React.js/Next.js】Zustand + TanStack Query 完全入門
今回は、React.js で クライアント側（UI）の状態を管理する Zustand と、API から取得するサーバーデータを管理する TanStack Query（旧 React Query） を組み合わせた実践的な使い方をわかりやすく解...
study-study.tachu-tachu.com
2026.02.13
TanStack Query + Redux Toolkit
コメント