useEffect اور useLayoutEffect کے درمیان کیا فرق ہے؟

Question

IT Interview Practice · Accepted Answer

دونوں اثرات چلاتے ہیں، لیکن **براؤزر کی پینٹنگ سے متعلق مختلف اوقات میں** — اور یہ وقت کا فرق پوری بات ہے۔

- **`useEffect`** براؤزر کے رنگین کرنے کے **بعد** چلتا ہے۔ یہ غیر متوازی اور غیر مسدود ہے۔ تقریبا سب کچھ کے لیے استعمال کریں (ڈیٹا، رکنیت، لاگنگ)۔
- **`useLayoutEffect`** DOM میں تبدیلی کے بعد لیکن براؤزر کی پینٹنگ سے پہلے **مطابقت سے** چلتا ہے۔ اسے استعمال کریں جب آپ کو ایک ہی فریم میں لے آؤٹ پڑھنا اور DOM کو تبدیل کرنا ہو تاکہ دیکھنے والی چمک سے بچا جا سکے۔

```text
render → DOM updated → [useLayoutEffect runs] → browser paints → [useEffect runs]
```

## آپ کو کبھی useLayoutEffect کی ضرورت کیوں ہو سکتی ہے

ایک عنصر کو ماپنے اور اس کے سائز کی بنیاد پر ایک ٹول ٹپ کو دوبارہ پوزیشن کرنے کا تصور کریں۔ `useEffect` کے ساتھ، صارف ٹول ٹپ کو غلط جگہ پر مختصر طور پر دیکھے گا، پھر یہ چھلانگ لگاتا ہے:

```jsx
useLayoutEffect(() => {
  const { height } = ref.current.getBoundingClientRect();
  setTooltipTop(-height); // applied BEFORE paint → no visible jump
}, []);
```

`useEffect` کے ساتھ، وہی کوڈ پینٹنگ کے بعد چلتا ہے → ایک فریم کی چمک۔

## آپ کو ڈیفالٹ کے حساب سے اس تک کیوں نہیں پہنچنا چاہیے

- یہ **پینٹنگ کو روکتا ہے**: `useLayoutEffect` میں بھاری کام UI کو جھنجھوڑا ہوا محسوس کرتا ہے، کیونکہ براؤزر اس کے مکمل ہونے تک پینٹ نہیں کر سکتا۔
- یہ **SSR کے دوران انتباہ کرتا ہے** (یہ سرور پر نہیں چل سکتا، جہاں کوئی لے آؤٹ نہیں ہے)۔

**انگوٹھے کا اصول:** `useEffect` کو ڈیفالٹ کریں؛ صرف `useLayoutEffect` کو مطابقت پذیر DOM پیمائش/تبدیلیوں کے لیے استعمال کریں جو ورنہ چمکتے۔

آپ کو کبھی useLayoutEffect کی ضرورت کیوں ہو سکتی ہے

آپ کو ڈیفالٹ کے حساب سے اس تک کیوں نہیں پہنچنا چاہیے

متعلقہ سوالات