React Query (TanStack): O Fim do useEffect para Data Fetching

Se o seu código tem useEffect com fetch, useState para loading e error, você está reinventando a roda (e provavelmente uma roda quadrada).

O TanStack Query (React Query) não é apenas uma lib de fetch. É um Gerenciador de Estado Assíncrono.

O Problema do Fetch Manual

Gerenciar estado de servidor no cliente é difícil:

1. Como lidar com cache? (Não buscar o mesmo dado 2x).
2. Como atualizar o dado se o usuário focar na janela?
3. Como tentar de novo se a internet falhar?
4. Como evitar "Race Conditions"?

O React Query resolve tudo isso com zero configuração.

O Poder do useQuery

import { useQuery } from '@tanstack/react-query'

function UserProfile() {
  const { isPending, error, data } = useQuery({
    queryKey: ['userProfile'],
    queryFn: () => fetch('/api/user').then((res) => res.json()),
  })

  if (isPending) return 'Carregando...'
  if (error) return 'Erro: ' + error.message

  return <div>{data.name}</div>
}

Stale-While-Revalidate

O React Query mostra o dado "velho" (stale) do cache instantaneamente enquanto busca o novo em background. O usuário sente que o app é instantâneo.

Mutations (Alterando Dados)

Para POST/PUT/DELETE, usamos useMutation. O "pulo do gato" é a Invalidation.

const mutation = useMutation({
  mutationFn: updateUser,
  onSuccess: () => {
    // Diz ao React Query: "O dado de perfil mudou, busque de novo!"
    queryClient.invalidateQueries({ queryKey: ['userProfile'] })
  },
})

Isso garante que sua UI esteja sempre sincronizada com o servidor, sem você precisar atualizar manualmente o estado local.

Conclusão

React Query elimina milhares de linhas de código boilerplate e bugs complexos. É a ferramenta essencial para qualquer aplicação React que fale com uma API.