Como você busca dados em React e evita race conditions?

Question

Accepted Answer

A abordagem básica usa `useEffect`, mas você deve lidar com **cleanup** e **respostas fora de ordem**, ou terá dados obsoletos e avisos.

```jsx
function User({ id }) {
  const [user, setUser] = useState(null);
  const [error, setError] = useState(null);

useEffect(() => {
    const ctrl = new AbortController();
    fetch(`/api/users/${id}`, { signal: ctrl.signal })
      .then(r => r.json())
      .then(setUser)
      .catch(e => { if (e.name !== "AbortError") setError(e); });

return () => ctrl.abort(); // cancel the in-flight request when id changes/unmounts
  }, [id]);
}
```

## Por que isso importa

Digamos que `id` muda rapidamente de `1` para `2`. Sem cancelamento, ambas as requisições estão em andamento. Se a requisição `1` for lenta e resolver **após** a requisição `2`, você exibiria dados do usuário `1` para o usuário `2`:

```text
fetch(1) ───────────(slow)──────▶ setUser(user1)  ❌ shown last, but wrong
fetch(2) ──(fast)──▶ setUser(user2)
```

Abortar a requisição anterior (o cleanup) corrige isso. Um padrão antigo de flag booleano (`let active = true; ... if (active) setUser(...)`) alcança o mesmo ao ignorar respostas obsoletas.

## Em aplicações reais, use uma biblioteca

Busca manual fica repetitiva e perde cache/tentativas. **React Query (TanStack Query)** ou **SWR** lidam com estados de carregamento/erro, cache, deduplicação, busca em background e stale-while-revalidate para você:

```jsx
const { data, isLoading, error } = useQuery({ queryKey: ["user", id], queryFn: () => getUser(id) });
```

Com frameworks como Next.js, loaders de dados do lado do servidor são frequentemente preferíveis.