Hoe haal je data op in React en voorkom je race conditions?

Question

Accepted Answer

De basisaanpak gebruikt `useEffect`, maar je moet **cleanup** en **out-of-order responses** afhandelen, anders krijg je stale data en waarschuwingen.

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

## Waarom het belangrijk is

Stel dat `id` snel verandert van `1` naar `2`. Zonder cancellation zijn beide requests in flight. Als request `1` traag is en resolveert **na** request `2`, zou je data van user `1` voor user `2` weergeven:

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

Het afbreken van de vorige request (de cleanup) lost dit op. Een ouder boolean-flag patroon (`let active = true; ... if (active) setUser(...)`) bereikt hetzelfde door stale responses te negeren.

## In echte apps, gebruik een library

Handmatig fetchen wordt repetitief en mist caching/retries. **React Query (TanStack Query)** of **SWR** verzorgen loading/error states, caching, deduplication, background refetch, en stale-while-revalidate voor je:

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

Met frameworks zoals Next.js zijn server-side data loaders vaak beter.