Come recuperi i dati in React ed eviti le condizioni di gara?

Question

Accepted Answer

L'approccio di base utilizza `useEffect`, ma devi gestire **pulizia** e **risposte fuori ordine**, o otterrai dati obsoleti e avvisi.

```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]);
}
```

## La condizione di gara che questo previene

Di' che `id` cambia rapidamente da `1` a `2`. Senza cancellazione, entrambe le richieste sono in volo. Se la richiesta `1` è lenta e si risolve **dopo** la richiesta `2`, visualizzerai i dati dell'utente `1` per l'utente `2`:

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

L'annullamento della richiesta precedente (la pulizia) risolve questo problema. Un vecchio modello a flag booleano (`let active = true; ... if (active) setUser(...)`) ottiene lo stesso risultato ignorando le risposte obsolete.

## Perché è importante

Il recupero manuale diventa ripetitivo e perde il caching/retry. **React Query (TanStack Query)** o **SWR** gestiscono stati di caricamento/errore, caching, deduplicazione, aggiornamento in background e stale-while-revalidate per te:

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

Con framework come Next.js, i data loader lato server sono spesso preferibili.