Reactの状態管理を簡単にする@tanstack/react-queryについて

はじめに

こんにちは。AG-Boost事業本部の宇野です。現在チームで開発しているサービスはReactを採用しており、状態管理ライブラリはReduxを使用しています。私は今までRedux以外の状態管理ライブラリを触ったことがありません。Redux以外の状態管理ライブラリには以前から興味があったため、今回@tanstack/react-queryを触ってみようと思いました。この記事では@tanstack/react-queryの使い方について記述しています。

tanstack.com

環境

React 18.2.0
@tanstack/react-query 5.22.2

インストール

npm install @tanstack/react-query
または
yarn add @tanstack/react-query

@tanstack/react-queryの使い方

まずはuseQueryをインポートします。

import { useQuery } from '@tanstack/react-query';

useQueryを使用するためにはQueryClientとQueryClientProviderの設定が必要になってきます。

import { createRoot } from 'react-dom/client';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';

const queryClient = new QueryClient();

createRoot(document.getElementById('root')).render(
  <QueryClientProvider client={queryClient}>
    <Top />
  </QueryClientProvider>
);

データの取得

useQueryを使用してデータを取得します。以下は、APIからデータを取得する例です。

const { data, isLoading } = useQuery({
  queryKey: ['users'], // 配列
  queryFn: fetchUsers, // データ取得の関数
});

データの表示

取得したデータを表示してみます。今回はusersのようなデータが返ってくる想定で書いています。

const users = [
  {
    name: '太郎',
    age: 20,
  },
  {
    name: '二郎',
    age: 30,
  },
  {
    name: '三郎',
    age: 40,
  },
];

const { data, isLoading } = useQuery({
  queryKey: ['users'],
  queryFn: () => users,
});

if (isLoading) {
  return <div>Loading...</div>;
}

return (
  <div>
    {data.map((v) => {
      return. <p>{`${v.name}さんは${v.age}才です。`}</p>;
    })}
  </div>
);

コードがシンプルで理解しやすいのがいいですね！

表示結果がこちらです。

キャッシュについて

@tanstack/react-queryはデフォルトで5分間データのキャッシュを行います。これにより、同じデータを再度取得する必要がなくなります。 gcTimeというオプションでキャッシュを無効化したり時間を延ばしたりすることも出来ます。ちなみにgcとはガベージコレクションを指してます。

ガベージコレクション（garbage collection）とは、コンピュータプログラムの実行環境などが備える機能の一つで、実行中のプログラムが占有していたメモリ領域のうち不要になったものを自動的に解放し、空き領域として再利用できるようにするもの。そのような処理を実行するプログラムを「ガベージコレクタ」（garbage collector）という。

ガベージコレクション（ガベージコレクタ / GC）とは - 意味をわかりやすく - IT用語辞典 e-Words

const { data, isLoading } = useQuery({
  queryKey: ['users'],
  queryFn: () => users,
  gcTime: 0, // キャッシュ無効化
});

最後に

Reduxは何かひとつ処理を追加する度に、action、reducerを追加しないというデメリットが存在しますが、@tanstack/react-queryはその手間を省くことが出来るため生産性が上がるなと感じました。また@tanstack/react-queryはデータの取得、キャッシュ、更新などを簡単に行うことができ、コードの複雑さを減らすことができるためReact初学者でも使いやすいライブラリだなと感じました。今回紹介したのは機能の一部分で、まだ触れていない機能が色々あるので少しずつ触っていきたいと思います。