Jak získáte data v Reactu a vyhnete se race conditions?

Question

Accepted Answer

Základní přístup používá `useEffect`, ale musíte zvládnout **cleanup** a **out-of-order odpovědi**, jinak dostanete zastaralá data a varování.

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

## Race condition, kterou to zabraňuje

Řekněme, že `id` se rychle změní z `1` na `2`. Bez zrušení jsou oba požadavky v provozu. Pokud je požadavek `1` pomalý a vyřeší se **po** požadavku `2`, zobrazíte data uživatele `1` pro uživatele `2`:

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

Zrušení předchozího požadavku (cleanup) to napravuje. Starší pattern s boolean příznakem (`let active = true; ... if (active) setUser(...)`) dosahuje stejného ignorováním zastaralých odpovědí.

## V skutečných aplikacích používejte knihovnu

Ruční načítání se stává opakujícím se a chybí mu caching/retries. **React Query (TanStack Query)** nebo **SWR** spravují stavy načítání/chyb, caching, deduplicaci, background refetch a stale-while-revalidate za vás:

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

S frameworky jako Next.js jsou server-side data loadery často preferovány.