Gerenciamento de Dados no React Moderno

Gerenciar dados vindos de APIs sempre foi um dos maiores desafios no React. Tradicionalmente, desenvolvedores lidam manualmente com estados de loading, success e error, caching e refetch.

O TanStack Query (React Query) surge como solução elegante que trata estado server-side como cidadão de primeira classe.

Instalação

npm install @tanstack/react-query

Primeiro Hook

O hook useQuery recebe chave única e função assíncrona:

import { useQuery } from "@tanstack/react-query";

function Perfil({ id }) {
  const { data, isLoading } = useQuery({
    queryKey: ["user", id],
    queryFn: () => fetchUser(id),
  });
  if (isLoading) return 
Carregando...
;
  return 
{data.name}
;
}

Cache Inteligente

Três configurações principais: staleTime (tempo até dados ficarem obsoletos), gcTime (tempo no cache inativo), refetchInterval (polling automático).

Mutações Otimistas

const mutation = useMutation({
  mutationFn: updateTodo,
  onMutate: async (novo) => {
    await queryClient.cancelQueries(["todos"]);
    const prev = queryClient.getQueryData(["todos"]);
    queryClient.setQueryData(["todos"], (old) =>
      old.map(t => t.id === novo.id ? { ...t, ...novo } : t)
    );
    return { prev };
  },
  onError: (err, vars, ctx) => queryClient.setQueryData(["todos"], ctx.prev),
});

Infinite Scroll

Com useInfiniteQuery você gerencia páginas automaticamente com fetchNextPage e hasNextPage.

Conclusão

Com mais de 40 mil estrelas no GitHub, o TanStack Query é hoje a biblioteca padrão para sincronização de dados em React. Se você ainda usa useEffect + fetch para cada chamada, está na hora de migrar.