Si të merrni të dhëna në React dhe të shmangni race conditions?

Question

Accepted Answer

Qasja bazë përdor `useEffect`, por duhet të trajtoni **cleanup** dhe **përgjigje jashtë rendit**, përndryshe do të merrni të dhëna të vjetra dhe paralajmërime.

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

## Pse ka rëndësi

Thoni se `id` ndryshon shpejt nga `1` në `2`. Pa anulim, të dy kërkesat janë në fluturim. Nëse kërkesa `1` është e ngadaltë dhe zgjidhet **pas** kërkesës `2`, do të shfaqnit të dhënat e përdoruesit `1` për përdoruesin `2`:

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

Anulimi i kërkesës së mëparshme (cleanup) e rregullon këtë. Një model më i vjetër me flamur boolean (`let active = true; ... if (active) setUser(...)`) arrin të njëjtën gjë duke injoruar përgjigjet e vjetra.

## Në aplikacionet reale, përdorni një bibliotekë

Marrja e të dhënave manuale bëhet përsëritese dhe humbet memorizimin/riprovojat. **React Query (TanStack Query)** ose **SWR** trajtojnë gjendje loading/error, memorizim, deduplikim, rifreskime në sfondin dhe stale-while-revalidate për ju:

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

Me korniza si Next.js, ngarkuesit e të dhënave në anën e serverit janë shpesh të preferueshëm.