Kepiye cara fetch data ing React lan ngindhari race conditions?

Question

Accepted Answer

Pendekatan dasar nggunakake `useEffect`, nanging anda kudu nangani **cleanup** lan **out-of-order responses**, utawa bakal entuk data stale lan warnings.

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

## The race condition this prevents

Senandikale `id` ganti cepet saka `1` menyang `2`. Tanpa cancellation, loro requests isih flying. Yen request `1` alon lan resolve **sawise** request `2`, anda bakal tuduhke data user `1` kanggo user `2`:

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

Abort request sadurungane (cleanup) ndandani masalah iki. Pola boolean-flag lawas (`let active = true; ... if (active) setUser(...)`) ngraihi tujuan sing sama kanthi nglirwakke stale responses.

## Ing real apps, gunakake library

Manual fetching dadi repetitive lan kurang caching/retries. **React Query (TanStack Query)** utawa **SWR** nangani loading/error states, caching, deduplication, background refetch, lan stale-while-revalidate para kowe:

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

Karo frameworks kaya Next.js, server-side data loaders asring luwih milih.