Padrão

React Query / TanStack Query

Lib para data fetching, cache e sync de server state. Substituí useState+useEffect+manual cache.

Definição

TanStack Query (antes React Query) é a lib padrão para gerenciar 'server state' — dados que vêm de APIs. Oferece: cache automático, deduplicação, background refetch, optimistic updates, infinite queries, mutations com rollback.

Problema → Solução

Problema

useState + useEffect para fetch é repetitivo e propenso a bugs: race conditions, cache manual, refetch on focus, retry, loading/error states.

Solução

useQuery({ queryKey, queryFn }) → retorna { data, isLoading, error, refetch }. Cache, refetch, dedupe, tudo automático. useMutation para writes com optimistic updates.

Dica de entrevista

Tip

Use queryKey como ['posts', userId, filters]. React Query invalida e refeta com base nessa key. Defaults são bons — staleTime: 0 (refetch sempre), refetchOnWindowFocus: true.

Código

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

function Posts() {
  const { data, isLoading } = useQuery({
    queryKey: ['posts'],
    queryFn: () => fetch('/api/posts').then(r => r.json())
  });

  if (isLoading) return <Skeleton />;
  return data.map(p => <Post key={p.id} {...p} />);
}

function NewPost() {
  const qc = useQueryClient();
  const mutation = useMutation({
    mutationFn: (newPost) => fetch('/api/posts', { method: 'POST', body: JSON.stringify(newPost) }),
    onSuccess: () => qc.invalidateQueries({ queryKey: ['posts'] })
  });

  return <button onClick={() => mutation.mutate({ title: 'Novo' })}>Criar</button>;
}

Perguntas de entrevista

Q.React Query vs SWR?▾

A.Ambos resolvem o mesmo problema. React Query: mais features (mutations, infinite, devtools), API mais explícita. SWR (Vercel): mais simples, integração natural com Next.js. Escolha por preferência — ambos excelentes.

Q.React Query com Server Components?▾

A.Em Server Components, fetch direto basta (já tem cache do Next.js). Use React Query apenas em Client Components. Para hidratar com dados do server, use HydrationBoundary.

Q.Optimistic updates como funciona?▾

A.useMutation com onMutate atualiza o cache otimisticamente. Se a mutation falhar, onError reverte. Resultado: UI instantânea, com rollback automático em caso de erro.

Termos relacionados

42/122← →