Hvordan henter du data i React og unngår race conditions?

Question

Accepted Answer

Den grunnleggende tilnærmingen bruker `useEffect`, men du må håndtere **cleanup** og **out-of-order responses**, ellers får du stale data og advarsler.

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

## Hvorfor det er viktig

Si at `id` endres raskt fra `1` til `2`. Uten kansellering er begge forespørslene aktive. Hvis forespørsel `1` er treg og løses **etter** forespørsel `2`, ville du vise data for bruker `1` for bruker `2`:

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

Å avbryte forrige forespørsel (cleanup-en) fikser dette. Et eldre boolean-flag-mønster (`let active = true; ... if (active) setUser(...)`) oppnår det samme ved å ignorere stale responses.

## I virkelige apper, bruk et bibliotek

Manuell henting blir repetitiv og mister caching/retries. **React Query (TanStack Query)** eller **SWR** håndterer loading/error-tilstander, caching, deduplication, background refetch og stale-while-revalidate for deg:

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

Med rammeverk som Next.js er server-side data loaders ofte å foretrekke.