كلاهما ينفذ effects، لكن في لحظات مختلفة نسبة إلى رسم المتصفح — والفرق في التوقيت هو الفكرة الأساسية بأكملها.
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 يجعل واجهة المستخدم تبدو متقطعة، لأن المتصفح لا يستطيع الرسم حتى ينتهي من ذلك.القاعدة الأساسية: استخدم useEffect بشكل افتراضي؛ استخدم useLayoutEffect فقط لقياسات/تغييرات DOM المتزامنة التي قد تسبب ومضة.