Hogyan töltesz be adatokat React-ben és hogyan kerülöd el a versenyfeltételeket?

Question

Accepted Answer

Az alapvető megközelítés a `useEffect` használatát, de kezelnod kell az **tisztítást** és az **sorrendet szalagok válaszokat**, vagy régi adatokat és figyelmeztetéseket kapsz.

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

## A versenyfeltétel, amelyet ez megelőz

Tegyük fel, hogy az `id` gyorsan `1`-ről `2`-re változik. Lemondás nélkül mindkét kérés repülésben van. Ha az `1`-es kérés lassú és az `2`-es kérés **után** oldódik meg, a felhasználó `1`-es adatait a felhasználó `2`-hez jelenítené meg:

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

Az előző kérés lemondása (tisztítás) ezt megoldja. A régebbi logikai jelző minta (`let active = true; ... if (active) setUser(...)`) ugyanezt éri el az elavult válaszok figyelmen kívül hagyásával.

## Valódi alkalmazásokban használjon könyvtárat

A kézi letöltés ismétlődővé válik és hiányzik a gyorsítótárazás/újrapróbálkozások. A **React Query (TanStack Query)** vagy az **SWR** kezeli az Ön számára a terhelés/hiba állapotokat, gyorsítótárazást, deduplikálást, háttérfrissítést és elavult-míg-revalidálást:

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

A Next.js-hez hasonló keretrendszerek esetén a szerver oldali adatbetöltők gyakran előnyösebbek.