React Query vs SWR: qual data fetcher?
React Query (TanStack Query) é um gerenciador completo de estado de servidor; SWR é um data fetcher enxuto e focado de stale-while-revalidate.
O TanStack Query lida com cache, refetching em background, paginação, mutations, invalidação e suporte offline com uma API rica, tornando-se uma solução completa de estado de servidor. O SWR (da Vercel) foca em um hook mínimo de stale-while-revalidate com uma superfície menor, ótimo para apps pesados em leitura e integração próxima com o Next.js. React Query vence em recursos e ferramentas de mutation; SWR vence em minimalismo e uma API pequena e focada.
| React Query | SWR | |
|---|---|---|
| Escopo | Gerenciador completo de estado de servidor | Fetcher focado |
| Mutations | Ricas, embutidas | Mais leves |
| Superfície da API | Maior | Mínima |
| Devtools | Excelente | Básico |
| Melhor para | Estado de servidor complexo | Fetching enxuto pesado em leitura |
Caso de uso e recursos
React Query serve a apps com estado de servidor complexo: muitas mutations, grafos de invalidação, paginação e necessidades offline, apoiados por devtools fortes. SWR serve a apps mais simples e pesados em leitura que querem um fetcher pequeno e ergonômico com boa integração ao Next.js. Ambos compartilham a filosofia stale-while-revalidate.
Testes e CI
Ambos mockam de forma limpa com interceptadores de fetch como o MSW. Qualquer um roda em runners gerenciados, onde runners mais rápidos encurtam as suítes de testes de data-fetching e de integração.
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.
O veredito
Precisa de mutations ricas, invalidação, paginação e devtools fortes: React Query. Quer um fetcher mínimo e focado para apps pesados em leitura: SWR. React Query é a solução mais completa de estado de servidor; SWR é a opção enxuta e ergonômica.