React Query vs SWR: Which Data Fetcher?
React Query (TanStack Query) is a full-featured server-state manager; SWR is a lean, focused stale-while-revalidate data fetcher.
TanStack Query handles caching, background refetching, pagination, mutations, invalidation, and offline support with a rich API, making it a complete server-state solution. SWR (from Vercel) focuses on a minimal stale-while-revalidate hook with a smaller surface, great for read-heavy apps and tight Next.js integration. React Query wins on features and mutation tooling; SWR wins on minimalism and a small, focused API.
| React Query | SWR | |
|---|---|---|
| Scope | Full server-state manager | Focused fetcher |
| Mutations | Rich, built-in | Lighter |
| API surface | Larger | Minimal |
| Devtools | Excellent | Basic |
| Best for | Complex server state | Lean read-heavy fetching |
Use case and features
React Query suits apps with complex server state: many mutations, invalidation graphs, pagination, and offline needs, backed by strong devtools. SWR suits simpler, read-heavy apps wanting a tiny, ergonomic fetcher with good Next.js integration. Both share the stale-while-revalidate philosophy.
Testing and CI
Both mock cleanly with fetch interceptors like MSW. Either runs on managed runners, where faster runners shorten data-fetching and integration test suites.
Decide with your own numbers, not a feature table
Feature comparisons age badly and rarely decide anything, because both tools in a mature category can do the job. What differs is how each behaves on your repository, and that takes one afternoon to measure.
# time a cold install with each candidate, cache cleared
hyperfine --prepare "rm -rf node_modules" --warmup 1 \
"<tool-a> install" "<tool-b> install"
# and the thing CI actually pays for: a cold run with no local cache
docker run --rm -v "$(pwd):/w" -w /w node:22 sh -c "<tool> install"What actually changes when you switch
- Lockfile format. A switch is a one-way door for anyone still on the old tool until everyone migrates, so plan it as a single coordinated change.
- Resolution strictness. Tools differ on whether an undeclared transitive import works, and the stricter one will surface latent bugs as new failures.
- CI cache configuration. The cache path and key differ per tool; carrying over the old ones silently disables caching.
- Everyone on the team and every runner must move together. Pin the version so they cannot drift.
The verdict
Need rich mutations, invalidation, pagination, and strong devtools: React Query. Want a minimal, focused fetcher for read-heavy apps: SWR. React Query is the fuller server-state solution; SWR is the lean, ergonomic option.