SWR versus React Query: escolhendo a ferramenta certa

O SWR ocupa aproximadamente 7 KB comprimidos com gzip. O React Query v5 ocupa aproximadamente 13 KB comprimidos com gzip. A diferença de tamanho reflete os recursos adicionais do React Query: pré-busca de consultas, cancelamento de consultas, um ciclo de vida das consultas mais detalhado e DevTools integradas.

Para aplicações sensíveis ao tamanho ou padrões simples de busca e exibição, o volume menor do SWR é uma vantagem significativa.

O SWR tem uma API mais simples e minimalista. Se sua principal necessidade é buscar dados e exibi-los com revalidação automática, o SWR atende a isso com elegância e pouquíssimo código repetitivo.

Por ser desenvolvido pela Vercel, o SWR integra-se excepcionalmente bem ao Next.js, especialmente para combinar a pré-busca de getServerSideProps ou getStaticProps com a revalidação no cliente por meio de dados de reserva.

Passe os dados pré-buscados ao SWR por meio da opção de reserva no SWRConfig ou da opção fallbackData em useSWR. O SWR utiliza esses dados como valor inicial do cache, eliminando o clarão da primeira carga e permitindo a revalidação em segundo plano.

Esse padrão é a abordagem recomendada para busca de dados em aplicações do Next.js que usam o roteador de páginas com a Vercel.

O React Query oferece um controle mais preciso sobre o ciclo de vida das consultas: staleTime, gcTime (coleta de lixo), refetchOnWindowFocus, quantidade de tentativas e atraso entre tentativas podem ser configurados individualmente. O sistema de mutações, com os retornos de chamada onSuccess, onError e onSettled, é bastante expressivo.

O React Query também oferece cancelamento de consultas por meio de AbortSignal, algo útil para interfaces de pesquisa enquanto você digita.

useInfiniteQuery do React Query, junto com getNextPageParam, foi criado especificamente para rolagem infinita e padrões de carregamento incremental. Ele gerencia a lógica do cursor das páginas e fornece um objeto pages plano ou estruturado.

O SWR tem useSWRInfinite, que oferece recursos semelhantes, mas com uma API um pouco mais básica, exigindo uma montagem mais manual das páginas.

O React Query oferece suporte à pré-busca de consultas ao passar o cursor sobre um elemento ou ao mudar de rota, usando queryClient.prefetchQuery. Os dados já estão no cache antes da montagem do componente, proporcionando uma renderização instantânea.

O SWR não tem uma API integrada de pré-busca além dos dados de reserva do SSR. Para pré-buscas acionadas ao passar o cursor, o React Query é a melhor escolha.

O React Query v5 simplificou a API fazendo useQuery retornar isPending em vez de isLoading, unificando os padrões de atualização otimista e aprimorando a inferência do TypeScript. A API da v5 é mais limpa e consistente do que as versões anteriores.

Se estiver avaliando o React Query, use diretamente a v5 em vez de aprender a v4 e depois migrar.

O SWR compartilha globalmente as entradas do cache entre os componentes por chave, sem exigir configuração de provedor além de SWRConfig para os valores padrão. O React Query exige QueryClientProvider com uma instância de QueryClient.

Para prototipagem rápida ou aplicações simples, o cache global do SWR sem configuração é mais rápido de configurar. O cliente explícito do React Query é melhor para aplicações grandes com requisitos complexos de cache.

Escolha o SWR quando sua aplicação for desenvolvida principalmente com Next.js, os padrões de busca de dados forem diretos (buscar-exibir-revalidar), você quiser um pacote menor ou sua equipe valorizar a simplicidade da API mais do que recursos avançados.

O SWR também é uma ótima escolha ao incorporar gradualmente uma biblioteca de busca de dados a uma base de código existente, sem uma grande migração.

Escolha o React Query quando precisar de um gerenciamento complexo do estado do servidor: rolagem infinita, pré-busca de consultas, estratégias de nova busca em segundo plano, dependências de consulta em várias etapas ou controle minucioso do TTL do cache.

O React Query também tem um ecossistema mais ativo de middleware e DevTools, e seu queryClient pode ser testado com mais facilidade de forma isolada.

Algumas equipes usam ambos: o SWR para buscas simples de um único recurso em componentes folha e o React Query para páginas complexas com várias consultas e pré-busca. Isso é incomum, mas válido se a equipe tiver proficiência nas duas APIs.

Com mais frequência, as equipes escolhem uma das opções e a aplicam de maneira consistente em toda a aplicação, para evitar a alternância de contexto e a sobrecarga de duas dependências.

Aproximadamente, como se comparam os tamanhos dos pacotes do SWR e do React Query?

O SWR (~7 KB) é mais simples, integra-se nativamente ao Next.js e abrange a maioria dos padrões de busca e exibição com pouco código. O React Query (~13 KB) oferece recursos mais avançados: consultas infinitas, pré-busca, retornos de chamada detalhados do ciclo de vida e cancelamento de consultas.

Escolha o SWR pela simplicidade e para projetos Next.js; escolha o React Query quando houver requisitos complexos de estado do servidor. Ambos oferecem suporte a TypeScript, Suspense, SSR e padrões off-line.