آپ React میں ڈیٹا کو کیسے حاصل کرتے ہیں اور race conditions سے کیسے بچتے ہیں؟

Question

Accepted Answer

بنیادی طریقہ `useEffect` استعمال کرتا ہے، لیکن آپ کو **cleanup** اور **غلط ترتیب میں آنے والے جوابات** کو سنبھالنا ہوگا، یا آپ کو پرانا ڈیٹا اور انتباہات ملیں گے۔

```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` کے **بعد** حل ہو تو، آپ صارف `1` کا ڈیٹا صارف `2` کے لیے دکھائیں گے:

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

پچھلی درخواست (cleanup) کو منسوخ کرنا اس کو ٹھیک کرتا ہے۔ ایک پرانا boolean-flag نمونہ (`let active = true; ... if (active) setUser(...)`) پرانے جوابات کو نظر انداز کرکے یہی حاصل کرتا ہے۔

## حقیقی ایپس میں، ایک لائبریری استعمال کریں

دستی حصول بار بار ہوتا ہے اور 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 اکثر ترجیح دی جاتی ہے۔