useEffect dependency array اور cleanup کے ساتھ عام نقصانات کیا ہیں؟

Question

Accepted Answer

ایک effect اپنے **dependencies** کی بنیاد پر دوبارہ چلتا ہے، اور اس array کو غلط طریقے سے حاصل کرنا #1 React bugs کا منبع ہے۔

## یہ کیوں اہم ہے

ایک effect اس render سے values کو بند کر دیتا ہے جس میں یہ بنایا گیا تھا۔ اگر آپ کسی dependency کو چھوڑ دیں تو یہ پرانی کو استعمال کرتا رہتا ہے:

```jsx
useEffect(() => {
  const id = setInterval(() => {
    console.log(count); // ❌ always logs the count from the FIRST render (0)
  }, 1000);
  return () => clearInterval(id);
}, []); // empty deps → effect never re-created → `count` frozen at 0
```

Fix: یا تو `count` کو deps میں شامل کریں، یا functional updater استعمال کریں جس کو اس کی ضرورت نہیں ہے (`setCount(c => c + 1)`)۔

## Pitfall 2: غیر مستحکم dependencies → effect ہر render میں چلتا ہے

Objects/arrays/functions ہر render میں دوبارہ بنائے جاتے ہیں، لہذا وہ ہر بار "نیے" ہوتے ہیں اور effect کبھی سکون سے نہیں بیٹھتا:

```jsx
const options = { id }; // ❌ new object every render
useEffect(() => { load(options); }, [options]); // runs every render
```

Fix: primitive پر منحصر ہوں (`[id]`)، یا `useMemo`/`useCallback` کے ساتھ memoize کریں۔

## Pitfall 3: بھولا ہوا cleanup → leaks اور races

```jsx
useEffect(() => {
  const ctrl = new AbortController();
  fetch(url, { signal: ctrl.signal }).then(setData);
  return () => ctrl.abort(); // cancels the old request when `url` changes
}, [url]);
```

Cleanup کے بغیر، ایک سست پہلی request نئی سے *بعد میں* resolve ہو سکتی ہے اور تازہ ڈیٹا کو overwrite کر سکتی ہے (ایک race condition)، اور subscriptions/timers جمع ہو جائیں گے۔ `react-hooks/exhaustive-deps` ESLint rule زیادہ تر missing-dependency cases کو پکڑتا ہے۔