دونوں اثرات چلاتے ہیں، لیکن براؤزر کی پینٹنگ سے متعلق مختلف اوقات میں — اور یہ وقت کا فرق پوری بات ہے۔
useEffect براؤزر کے رنگین کرنے کے بعد چلتا ہے۔ یہ غیر متوازی اور غیر مسدود ہے۔ تقریبا سب کچھ کے لیے استعمال کریں (ڈیٹا، رکنیت، لاگنگ)۔useLayoutEffect DOM میں تبدیلی کے بعد لیکن براؤزر کی پینٹنگ سے پہلے مطابقت سے چلتا ہے۔ اسے استعمال کریں جب آپ کو ایک ہی فریم میں لے آؤٹ پڑھنا اور DOM کو تبدیل کرنا ہو تاکہ دیکھنے والی چمک سے بچا جا سکے۔render → DOM updated → [useLayoutEffect runs] → browser paints → [useEffect runs]
ایک عنصر کو ماپنے اور اس کے سائز کی بنیاد پر ایک ٹول ٹپ کو دوبارہ پوزیشن کرنے کا تصور کریں۔ useEffect کے ساتھ، صارف ٹول ٹپ کو غلط جگہ پر مختصر طور پر دیکھے گا، پھر یہ چھلانگ لگاتا ہے:
useLayoutEffect(() => {
const { height } = ref.current.getBoundingClientRect();
setTooltipTop(-height); // applied BEFORE paint → no visible jump
}, []);
useEffect کے ساتھ، وہی کوڈ پینٹنگ کے بعد چلتا ہے → ایک فریم کی چمک۔
useLayoutEffect میں بھاری کام UI کو جھنجھوڑا ہوا محسوس کرتا ہے، کیونکہ براؤزر اس کے مکمل ہونے تک پینٹ نہیں کر سکتا۔انگوٹھے کا اصول: useEffect کو ڈیفالٹ کریں؛ صرف useLayoutEffect کو مطابقت پذیر DOM پیمائش/تبدیلیوں کے لیے استعمال کریں جو ورنہ چمکتے۔