TanStack Query(旧 React Query)とは何か？非同期データ取得とキャッシュの標準ライブラリ

React Query ってよく聞くけど、Redux とどう違うの？ 「useEffect で fetch するのと何が違うの？」 「今は TanStack Query って名前変わった？」 ── 2018年頃から急速に広まった React Query は、2022年に TanStack Query へ改名し、現在はマルチフレームワーク対応の 「サーバ状態ライブラリ」 として定着しました。

ざっくり言うと、TanStack Query は サーバから取ったデータをキャッシュして、必要なときに同期する 専門ライブラリです。 「サーバ状態(server state)」 を扱うことに特化していて、「クライアント側だけの状態(UI 状態など)」 とは別物として扱う、というのが設計思想の核心です。

この記事では、2026年5月時点の TanStack Query v5 系をベースに、仕組み・基本の書き方・Redux 等との違い・採用判断軸 を整理します。 仕様は活発に変化しているので、最終確認は 公式ドキュメント を見るのが安全です。

なぜ TanStack Query が必要になったか

「なぜわざわざ専用ライブラリが必要なのか」 を 「useState + useEffect」 と比較すると分かりやすくなります。

// 「素朴な」 書き方
function UserProfile({ userId }) {
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    setLoading(true);
    fetch(`/api/users/${userId}`)
      .then(r => r.json())
      .then(setUser)
      .catch(setError)
      .finally(() => setLoading(false));
  }, [userId]);

  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error</p>;
  return <p>{user.name}</p>;
}

これに対して、TanStack Query では:

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

function UserProfile({ userId }) {
  const { data: user, isLoading, error } = useQuery({
    queryKey: ['user', userId],
    queryFn: () => fetch(`/api/users/${userId}`).then(r => r.json()),
  });

  if (isLoading) return <p>Loading...</p>;
  if (error) return <p>Error</p>;
  return <p>{user.name}</p>;
}

「非同期の細かい挙動を毎回手書きしなくていい」 のが、TanStack Query の最大の利点です。

キャッシュの考え方 — stale と fresh

TanStack Query のキャッシュは、stale-while-revalidate という考え方に基づいています。

`データを 「絶対今の値」 か 「だいたい近い値」 のどちらで扱うか」 を 「staleTime」 でチームごとに調整するのが、TanStack Query の運用の中心です。

主要機能の一覧

「データ取得まわりの定番タスク」 が一通りそろっています。

「データ取得で手で書きたくない処理は、まず TanStack Query にあるか確認する」 だけで、ほぼ何でも見つかる印象です。

Redux / Zustand / Context との違い

「なんで状態管理ライブラリの代わりに使うの？」 という疑問は、よく出ます。

要点は Redux 系と TanStack Query は競合ではなく、役割分担で併用する ことです。 「サーバから取ったデータは TanStack Query、UI 状態(ダークモード / モーダル開閉)は Zustand / Context」 という棲み分けが2026 年現在の主流です。

楽観的更新の書き方

UX を高める典型機能 「楽観的更新」 の書き方を見ます。

const queryClient = useQueryClient();

const toggleLike = useMutation({
  mutationFn: (postId) =>
    fetch(`/api/posts/${postId}/like`, { method: 'POST' }),

  onMutate: async (postId) => {
    // 進行中の取得をキャンセル
    await queryClient.cancelQueries({ queryKey: ['posts'] });

    // 前の値を保持(ロールバック用)
    const previous = queryClient.getQueryData(['posts']);

    // 楽観的に更新
    queryClient.setQueryData(['posts'], (old) =>
      old.map(p => p.id === postId ? { ...p, liked: !p.liked } : p)
    );

    return { previous };
  },

  onError: (err, postId, context) => {
    // 失敗したら前の値に戻す
    queryClient.setQueryData(['posts'], context.previous);
  },

  onSettled: () => {
    queryClient.invalidateQueries({ queryKey: ['posts'] });
  },
});

`非同期処理の 「応答までの空白」 をなくす」 のが楽観的更新の核心で、TanStack Query はこれを正攻法で書きやすくしてくれます。

いつ TanStack Query を使うか

採用判断の目安を整理します。

「React 系のフルスタックアプリ」 を作るなら、いまも 「必須スキル」 に近い位置にいます。

ハマりやすいポイント

便利な反面、現場で踏みやすい注意点も整理します。

「設定の妥当性を体感で詰める」 のが、TanStack Query の運用を綺麗にする最大のコツです。

AI 時代の TanStack Query

AI 連携の文脈でも TanStack Query は活躍します。

「AI 応答の不確実な遅延」 を 「TanStack Query のキャッシュとプリフェッチ」 で吸収する、というのは AI 時代の UX 設計で頻出するパターンです。

TanStack Query に関するよくある質問

Q. React Query と TanStack Query は同じものですか？

A. 同じです。2022 年に 「React Query」 から 「TanStack Query」 に改名し、React 以外のフレームワーク(Solid / Vue / Svelte / Angular)もサポートする多目的ライブラリになりました。「React Query」 は React 向けアダプタの呼称として残っています。

Q. SWR と TanStack Query、どちらを選ぶべきですか？

A. 用途と好みで分けます。SWR は Vercel 製の軽量・シンプル路線、TanStack Query は機能が豊富で 「何でもできる」 路線。「小さなアプリで軽さ重視」 なら SWR、「本格的な機能と DevTools が欲しい」 なら TanStack Query、というのがざっくりの選び方です。

Q. RSC と Server Actions だけで完結する場合、TanStack Query は不要ですか？

A. ケースバイケースです。完全に 「読みは RSC、書きは Server Actions、再取得は revalidatePath」 で済む場合は不要です。ただし、「Realtime な再取得」 「フォーカス再取得」 「楽観的更新」 が必要な場面では、TanStack Query を併用する設計が依然として有効です。

Q. tRPC と TanStack Query は必ずセットですか？

A. React で tRPC を使う場合は事実上セットです。「tRPC の React Hooks」 は内部的に TanStack Query を使っており、「useQuery / useMutation」 と同じ感覚で 「trpc.x.useQuery()」 が使えます。

Q. キャッシュ無効化を全部書くのが面倒です。

A. queryKey の階層を意識して、まとめて invalidate するのが定石です。「queryClient.invalidateQueries({ queryKey: ['posts'] })」 だけで 「['posts', ...]」 系すべてのクエリを無効化できます。

Q. SSR ではどう使いますか？

A. サーバ側でデータをフェッチ → dehydrate してクライアントに渡す → hydrateのパターンが基本です。Next.js / Remix での専用ヘルパー(「HydrationBoundary」 等)があります。

Q. TanStack Query を学ぶ最短ルートは？

A. ① 「useQuery」 で1つ取得、② 「useMutation」 で1つ更新、③ 「queryClient.invalidateQueries」 で再取得、④ DevTools をインストールして挙動を観察、の4段階が王道です。「動かしながらキャッシュ状態を見る」 のが、TanStack Query の理解を加速する最大のコツです。

参考リンク

• TanStack Query: 公式
• TanStack Query: GitHub
• TanStack: 全体
• React Query DevTools: Docs
• SWR: 公式
• tRPC: 公式