Miten haet dataa Reactissa ja vältät race conditionit?

Question

Accepted Answer

Peruslähtökohtana käytetään `useEffect`-hookia, mutta sinun on käsiteltävä **cleanup** ja **out-of-order responses**, muuten saat vanhentuneita tietoja ja varoituksia.

```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, jonka tämä estää

Oletetaan, että `id` muuttuu nopeasti arvosta `1` arvoon `2`. Ilman peruutusta molemmat pyynnöt ovat liikkeellä. Jos pyyntö `1` on hidas ja ratkaistu **jälkeen** pyynnön `2`, näytät käyttäjän `1` tietoja käyttäjälle `2`:

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

Edellisen pyynnön peruutus (cleanup) korjaa tämän. Vanhempi boolean-lippumalli (`let active = true; ... if (active) setUser(...)`) saavuttaa saman ohittamalla vanhentuneita vastauksia.

## Oikeissa sovelluksissa käytä kirjastoa

Manuaalinen hakeminen tulee toistuvaksi ja menettää välimuistin/uudelleenyritykset. **React Query (TanStack Query)** tai **SWR** hallitsevat lataus-/virhetiloja, välimuistia, deduplicatiota, tausta-päivitystä ja stale-while-revalidate puolestasi:

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

Next.js-kaltaisten kehysten kanssa palvelinpuolen tietojen latausohjelmat ovat usein parempia.