Kif tifgħad data f'React u tevita race conditions?

Question

Accepted Answer

L-approċċ bażiku juża `useEffect`, iżda għandek tindirizzja **cleanup** u **responses mhux fl-ordni**, jew se tikseb data stali u twissiriet.

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

## Il-race condition li din tipprevjeni

Agħar `id` jinbidel malajr minn `1` għal `2`. Mingħajr kansellazzjoni, iż-żewg requests huma mid-dlugħ. Jekk request `1` huwa bil-mod u jissolvi **wara** request `2`, ikollok turu d-data ta' user `1` għal user `2`:

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

Kansellazzjoni tal-riċħesta preċedenti (il-cleanup) issaħħaħ dan. Pattern ta' boolean-flag antik (`let active = true; ... if (active) setUser(...)`) jinkiseb l-istess billi jinjoraw responses stali.

## F'apps reali, uża librerija

Fetch manuali jidher ripetitiv u jinsab nuqs ta' caching/retries. **React Query (TanStack Query)** jew **SWR** jipprovdu loading/error states, caching, deduplication, background refetch, u stale-while-revalidate għalik:

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

Ma' frameworks bħal Next.js, server-side data loaders ħafna drabi huma preferuti.