「脱Reduxしたい」
「もっと簡単にReactの状態管理をしたい」
「React Queryが気になる」
上記のような思いを持つ方向けの記事です。
最近私が使っている状態管理ツールのReact Queryをご紹介します。
しばらく使ってみて、以下のようなメリットを感じています。
- 状態管理がシンプルになる
- グローバルな状態管理が簡単にできる
- キャッシュを活用してデータ取得回数を減らせる
使い方に少しばかりコツが必要ですが、今回はまずReact Queryの導入方法についてご紹介します。
次回はより具体的な使い方を解説予定です。
React Queryの導入手順
React Queryを開発環境に導入する手順を紹介します。
React Queryの導入手順1|パッケージのインストール
まずは開発環境にインストールしましょう。
TypeScript環境であれば型定義もインストールしておきましょう。
package.jsonに以下が追加されたことを確認します。
現在はバージョン3系ですね。
React Queryの導入手順2|Providerを設定
アプリのルートとなるファイルでQueryClientProviderを設定します。
ポイントは、React Queryがどのようにデータをキャッシュするのかを設定するためのQueryClientを生成して、QueryClientProviderに渡すところです。
また、ReactQueryDevtoolsを使うことによって、開発環境でのみ現在のキャッシュ状況をGUIでわかりやすく確認することができます。

これらが設定できたらReact Queryを使う準備が整いました。
次回はReact Queryによるデータの取得と変更方法を解説します。
株式会社Playgroundのサービス
- 無料・簡単・片手でホームページを作成できる自社サービス Rakwi
- Web制作とアプリ開発を学べるオンラインプログラミング講座 Upstairs
- 開発,DX推進支援サービス スタートアッププラン