Jak pobierać dane w React i unikać race conditions?

Question

Accepted Answer

Podstawowe podejście używa `useEffect`, ale musisz obsługiwać **cleanup** i **nieporządkowe odpowiedzi**, inaczej uzyskasz przestarzałe dane i ostrzeżenia.

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

## Dlaczego to ważne

Powiedzmy, że `id` szybko zmienia się z `1` na `2`. Bez anulowania oba żądania są w locie. Jeśli żądanie `1` jest wolne i rozwiąże się **po** żądaniu `2`, wyświetlisz dane użytkownika `1` dla użytkownika `2`:

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

Anulowanie poprzedniego żądania (cleanup) to naprawia. Starszy wzorzec z flagą boolean (`let active = true; ... if (active) setUser(...)`) osiąga to samo, ignorując przestarzałe odpowiedzi.

## W prawdziwych aplikacjach użyj biblioteki

Ręczne pobieranie staje się powtarzające i pomija caching/ponowne próby. **React Query (TanStack Query)** lub **SWR** obsługują stany loading/error, caching, deduplikację, odświeżanie w tle i stale-while-revalidate:

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

Z frameworkami takimi jak Next.js, loadery danych po stronie serwera są często preferowane.