Kako pridobite podatke v React in se izognete race conditions?

Question

Accepted Answer

Osnovni pristop uporablja `useEffect`, vendar morate obravnavati **cleanup** in **neurejena odziva**, sicer boste dobili zastarele podatke in opozorila.

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

## Zakaj je to pomembno

Predpostavimo, da se `id` hitro spremeni z `1` na `2`. Brez preklicev sta obe zahtevi v teku. Če je zahteva `1` počasna in se razreši **po** zahtevi `2`, bi prikazali podatke uporabnika `1` za uporabnika `2`:

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

Preklicovanje prejšnje zahteve (cleanup) to popravi. Starejši vzorec z boolean zastavico (`let active = true; ... if (active) setUser(...)`) to doseže z ignoriranjem zastarelih odzivov.

## V pravi aplikacijah uporabite knjižnico

Ročno pridobivanje postane ponavljajoče in ne upošteva predpomnenja/ponovnih poskusov. **React Query (TanStack Query)** ali **SWR** za vas obravnavata stanja loading/error, predpomnenje, deduplikacijo, osveživanje v ozadju in stale-while-revalidate:

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

Z ogrodji, kot je Next.js, so nalagalniki podatkov na strani strežnika pogosto boljši.