ਤੁਸੀਂ React ਵਿੱਚ ਡੇਟਾ ਕਿਵੇਂ ਪ੍ਰਾਪਤ ਕਰਦੇ ਹੋ ਅਤੇ race conditions ਤੋਂ ਕਿਵੇਂ ਬਚਦੇ ਹੋ?

Question

Accepted Answer

ਮੂਲ ਤਰੀਕਾ `useEffect` ਦੀ ਵਰਤੋਂ ਕਰਦਾ ਹੈ, ਪਰ ਤੁਹਾਨੂੰ **cleanup** ਅਤੇ **out-of-order responses** ਨੂੰ ਸਭਾਲਣਾ ਚਾਹੀਦਾ ਹੈ, ਨਹੀਂ ਤਾਂ ਤੁਹਾਨੂੰ stale ਡੇਟਾ ਅਤੇ ਚੇਤਾਵਨੀਆਂ ਮਿਲਣਗੀਆਂ।

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

## ਇਹ ਮਹੱਤਵਪੂਰਨ ਕਿਉਂ ਹੈ

ਮੰਨ ਲਓ ਕਿ `id` ਤੇਜ਼ੀ ਨਾਲ `1` ਤੋਂ `2` ਵਿੱਚ ਬਦਲ ਜਾਂਦੀ ਹੈ। ਕੈਂਸਲੇਸ਼ਨ ਤੋਂ ਬਿਨਾਂ, ਦੋਵੇਂ ਬੇਨਤੀਆਂ ਪ੍ਰਵਾਨ ਵਿੱਚ ਹਨ। ਜੇ ਬੇਨਤੀ `1` ਧੀਮੀ ਹੈ ਅਤੇ ਬੇਨਤੀ `2` ਤੋਂ **ਬਾਅਦ** ਵਿੱਚ resolve ਹੋ ਜਾਂਦੀ ਹੈ, ਤੁਸੀਂ ਉਪਭੋਗਤਾ `2` ਲਈ ਉਪਭੋਗਤਾ `1` ਦਾ ਡੇਟਾ ਦਿਖਾਓਗੇ:

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

ਪਿਛਲੀ ਬੇਨਤੀ ਨੂੰ ਰੋਕਣਾ (cleanup) ਇਸ ਨੂੰ ਠੀਕ ਕਰਦਾ ਹੈ। ਇੱਕ ਪੁਰਾਣਾ boolean-flag ਪੈਟਰਨ (`let active = true; ... if (active) setUser(...)`) stale responses ਨੂੰ ਨਜ਼ਰਅੰਦਾਜ਼ ਕਰਕੇ ਉਹੀ ਪ੍ਰਾਪਤ ਕਰਦਾ ਹੈ।

## ਅਸਲ ਐਪ੍ਲੀਕੇਸ਼ਨਾਂ ਵਿੱਚ, ਇੱਕ library ਦੀ ਵਰਤੋਂ ਕਰੋ

ਦਸਤੀ 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 ਅਕਸਰ ਇਮਤਿਆਜ਼ੀ ਹਨ।