useEffect کیا ہے اور یہ کب چلتا ہے?

Question

Accepted Answer

`useEffect` **مضافی اثرات** چلاتا ہے — کام جو React کی rendering سے باہر نکلتا ہے، جیسے ڈیٹا حاصل کرنا، رکنیت، ٹائمرز، یا دستی DOM اپڈیٹس۔ یہ component render ہونے کے **بعد** چلتا ہے، مضافی اثرات کو render body سے باہر رکھتا ہے (render خالص رہنا چاہیے).

## Dependency array وقت کو کنٹرول کرتا ہے

```jsx
useEffect(() => {
  document.title = `Count: ${count}`;
}, [count]); // ← dependency array
```

- **`[count]`** → پہلی render کے بعد اور جب بھی `count` بدلے چلتا ہے۔
- **`[]`** (خالی) → mount کے بعد **ایک بار** چلتا ہے (ایک بار سیٹ اپ کے لیے بہتر).
- **چھوڑا گیا** → **ہر** render کے بعد چلتا ہے (شاذ ہی جو آپ چاہتے ہیں).

## صفائی: ایک فنکشن واپس کریں

اگر ایک effect کچھ سیٹ اپ کرتا ہے جس کو ختم کرنے کی ضرورت ہے تو صفائی کا فنکشن واپس کریں۔ React اسے اگلی effect سے پہلے اور جب component unmount ہو تو کال کرتا ہے:

```jsx
useEffect(() => {
  const id = setInterval(() => setN(n => n + 1), 1000);
  return () => clearInterval(id); // cleanup → prevents a leaked timer
}, []);
```

## صفائی کیوں اہم ہے

اس کے بغیر، ہر دوبارہ چلانا ایک اور ٹائمر/رکنیت شامل کرے اور پرانا کو کبھی ہٹائے نہ — ایک روایتی میموری لیک۔ `[dep]` effect کے لیے زندگی کا چکر ہے: *effect چلائیں → (dep بدلتا ہے) → صفائی چلائیں → effect دوبارہ چلائیں*.

**نکتہ:** ان چیزوں کے لیے effects استعمال نہ کریں جو آپ render کے دوران شمار کر سکتے ہیں (بجائے اس کے اقدار اخذ کریں)، اور ہر قدر جو effect dependency array سے پڑھتا ہے اسے شامل کریں (the `react-hooks/exhaustive-deps` lint قانون مدد کرتا ہے).