Cum preiei date în React și evit race conditions?

Question

Accepted Answer

Abordarea de bază folosește `useEffect`, dar trebuie să gestionezi **cleanup** și **răspunsuri neordonate**, altfel vei obține date vechi și avertismente.

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

## De ce conteaza

Să presupunem că `id` se schimbă rapid de la `1` la `2`. Fără anulare, ambele cereri sunt în curs de execuție. Dacă cererea `1` este lentă și se rezolvă **după** cererea `2`, ai afișa datele utilizatorului `1` pentru utilizatorul `2`:

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

Anularea cererii anterioare (cleanup-ul) rezolvă aceasta. Un model mai vechi cu steag boolean (`let active = true; ... if (active) setUser(...)`) realizează același lucru ignorând răspunsurile vechi.

## În aplicații reale, folosește o bibliotecă

Preluarea manuală devine repetitivă și ratează cache/reîncercări. **React Query (TanStack Query)** sau **SWR** gestionează stări de încărcare/eroare, cache, deduplicare, refetch în background și stale-while-revalidate pentru tine:

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

Cu framework-uri ca Next.js, loader-ele de date pe server sunt adesea de preferat.