Bagaimanakah anda mengambil data dalam React dan mengelakkan race conditions?

Question

Accepted Answer

Pendekatan asas menggunakan `useEffect`, tetapi anda mesti mengendalikan **pembersihan** dan **respons di luar turutan**, atau anda akan mendapat data basi dan amaran.

```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 yang dicegah ini

Katakan `id` berubah dengan pantas dari `1` kepada `2`. Tanpa pembatalan, kedua-dua permintaan sedang dalam perjalanan. Jika permintaan `1` perlahan dan selesai **selepas** permintaan `2`, anda akan memaparkan data pengguna `1` untuk pengguna `2`:

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

Membatalkan permintaan sebelumnya (pembersihan) membaiki perkara ini. Sesuatu corak bendera boolean yang lebih lama (`let active = true; ... if (active) setUser(...)`) mencapai perkara yang sama dengan mengabaikan respons basi.

## Dalam aplikasi sebenar, gunakan sesuatu pustaka

Pengambilan manual menjadi berulang-ulang dan terlepas caching/percubaan semula. **React Query (TanStack Query)** atau **SWR** mengendalikan state loading/ralat, caching, penyahduaan (deduplication), refetch latar belakang, dan stale-while-revalidate untuk anda:

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

Dengan rangka kerja seperti Next.js, pemuat data sisi pelayan (server-side) selalunya lebih disukai.