Kako preuzimašš podatke u React-u i kako izbjegavaš uvjete trke?

Question

Accepted Answer

Osnovni pristup koristi `useEffect`, ali morate rukovati **čišćenjem** i **odgovorima koji nisu redoslijeda**, ili ćete dobiti zastarjele podatke i upozorenja.

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

## Uvjet trke koji ovo sprječava

Recimo da se `id` brzo promijeni s `1` na `2`. Bez otkazivanja, oba zahtjeva su u letu. Ako je zahtjev `1` spor i razriješi se **nakon** zahtjeva `2`, prikazali biste podatke korisnika `1` za korisnika `2`:

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

Otkazivanje prethodnog zahtjeva (čišćenje) ovo rješava. Stariji obrazac boolean zastavice (`let active = true; ... if (active) setUser(...)`) postiže isto ignoriranjem zastarjelih odgovora.

## U pravim aplikacijama, koristite biblioteku

Ručno preuzimanje postaje repetitivno i propušta cachiranje/pokušaje. **React Query (TanStack Query)** ili **SWR** rukovaju stanjima učitavanja/grešaka, cachiranjem, dedupliciranjem, osvježavanjem u pozadini i zastarjelim-tijekom-revalidacije za vas:

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

S okvirima kao što je Next.js, učitavači podataka na strani poslužitelja često su preferirani.