useLayoutEffect()

تأثير متزامن قبل الرسم على الشاشة useLayoutEffect()

نسخة من useEffect تعمل بشكل متزامن قبل أن يرسم المتصفح الشاشة — لقياس DOM وتعديل الحالة دون أن يرى المستخدم وميضًا.

الفرق الوحيد عن useEffect هو التوقيت: useLayoutEffect يعمل بعد أن يُحدّث React الـ DOM، لكن قبل أن يرسم المتصفح التغييرات فعليًا على الشاشة. أي تحديث حالة داخله يُعالَج قبل الرسم أيضًا — فلا يرى المستخدم إطارًا وسيطًا.

الاستخدام الأشهر: قياس أبعاد عنصر (مثل ارتفاع تلميح Tooltip) بعد رسمه، ثم إعادة رسمه بموضع صحيح دون وميض ملحوظ.

الصياغة

useLayoutEffect(() => {
  // كود يعمل قبل رسم المتصفح
}, [dependencies]);

📄 مثال

function Tooltip() {
  const ref = useRef(null);
  const [top, setTop] = useState(0);

  useLayoutEffect(() => {
    const { height } = ref.current.getBoundingClientRect();
    setTop(-height - 8); // نصحّح الموضع قبل أن يرى المستخدم أي وميض
  }, []);

  return <div ref={ref} style={{ position: "absolute", top }}>تلميح</div>;
}

أهم المعاملات

المعامل	الوظيفة
setup	الدالة التي تُنفَّذ بشكل متزامن قبل رسم المتصفح
dependencies	مصفوفة القيم التي عند تغيّرها يُعاد تشغيل التأثير

💡 نصائح عملية

استخدمه فقط عند الحاجة الفعلية لقياس DOM قبل الرسم — وإلا فضّل useEffect دائمًا
لا يعمل على الخادم إطلاقًا لأن معلومات التخطيط (Layout) غير موجودة أثناء الرندر الخادمي

⚠️ أخطاء شائعة

استخدامه كبديل افتراضي لـ useEffect — يحجب رسم المتصفح فيبطئ التطبيق عند الاستخدام المفرط
الاعتماد عليه في مكوّن قد يُرسَم على الخادم دون خطة بديلة — لا ينفّذ شيئًا هناك

🎓 تريد فهم الصورة الكاملة خطوة بخطوة؟ ابدأ من مسار REACT الكامل بالعربي.