Server-state libraries（React Query/TanStack Query、SWR、RTK Query）は、サーバーから取得したデータの管理を専門としており、リモートソースと同期を保つキャッシュとして機能します。キャッシング、ロード/エラー状態、リフェッチ、重複排除を自動的に処理し、膨大な量の手動コードを置き換えます。
サーバーデータはサーバーによって所有され、クライアント上で単にキャッシュされるため、古くなる可能性があります。手動で管理することは、各エンドポイントに対してキャッシング、ロード/エラー追跡、リフェッチ、リトライ、重複排除を再実装することを意味します — エラーが起きやすく繰り返しになります。
import { useQuery } from "@tanstack/react-query";
function Users() {
const { data, isLoading, error, refetch } = useQuery({
queryKey: ["users"], // cache key
queryFn: () => fetch("/api/users").then(r => r.json()),
staleTime: 60_000, // consider fresh for 1 min
});
if (isLoading) return <Spinner />;
if (error) return <Error />;
return <List data={data} />;
}
その単一のhookは以下を提供します：
✓ Caching — data cached by queryKey, shared across components
✓ Loading/error — isLoading/error states managed for you
✓ Deduplication — same query in 5 components = ONE network request
✓ Background refetch— refetch on window focus/reconnect to stay fresh
✓ Stale-while-revalidate — show cached data instantly, refetch in background
✓ Retries — auto-retry failed requests
✓ Pagination/infinite scroll, prefetching, cache invalidation
const mutation = useMutation({
mutationFn: (user) => api.createUser(user),
onSuccess: () => queryClient.invalidateQueries({ queryKey: ["users"] }), // refetch the list
});
mutation後、関連するクエリを無効化するとキャッシュが自動的にリフェッチされ、UIがサーバーと同期を保ちます。
Much of what people put in Redux is actually SERVER state.
Moving it to React Query often shrinks global state to just true UI state
(theme, modals, filters) — simplifying the whole app.
Server-state librariesは、汎用の状態ツール（Redux、useState）が扱うのに苦手な問題を解決します：クライアントキャッシュをリモートデータと同期させることです。
手動でのフェッチング/キャッシング/ロード処理の数百行を宣言型のhookで置き換え、手で正しく実装するのが困難な高度な動作（dedup、バックグラウンドリフェッチ、stale-while-revalidate）を提供します。
サーバー状態が専用ツールを必要とすること — そしてそのツールを採用することがグローバル状態を大幅に簡潔にすることが多い — を認識することは、最も影響のある最新フロントエンドアーキテクチャの知見の1つです。
ジュニアからシニアまで、詳細な回答付きのIT面接質問ライブラリ。
寄付する