როგორ ფეტჩავთ მონაცემებს React-ში და თავიდან აგერიდებთ race conditions-ებს?

Question

Accepted Answer

ძირითადი მიდგომა იყენებს `useEffect`-ს, მაგრამ უნდა მართოთ **cleanup** და **out-of-order responses**, წინააღმდეგ შემთხვევაში მიიღებთ stale data-ს და გაფრთხოებას.

```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, რომელიც აქ უზღდება

თქვით `id` სწრაფად იცვლება `1`-დან `2`-მდე. cancellation-ის გარეშე, ორივე request ფრენის რეჟიმში არის. თუ request `1` ნელია და resolve ხდება request `2`-ის **შემდეგ**, დააჩვენებთ user `1`-ის მონაცემებს user `2`-სთვის:

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

შეზღუდვა წინა request-ის (cleanup) აყვავებს ამას. უძველესი boolean-flag pattern (`let active = true; ... if (active) setUser(...)`) იღწვის ამას stale responses-ის უგულებელყოფით.

## რეალურ აპლიკაციებში გამოიყენეთ ლიბრარი

ხელით fetching გახდება განმეორებადი და აკლებს caching/retries. **React Query (TanStack Query)** ან **SWR** მართავენ loading/error states-ებს, caching-ს, deduplication-ს, background refetch-ს და stale-while-revalidate-ს თქვენთვის:

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

Next.js-ის მსგავსი frameworks-ებით, server-side data loaders-ები ხშირად უფრო სასარგებლოა.