useEffect()

خطّاف التأثيرات الجانبية useEffect()

useEffect يُشغّل كودًا بعد أن يرسم React الشاشة فعليًا — لمزامنة المكوّن مع نظام خارجي (شبكة، مؤقّت، اشتراك).

useEffect(setup, dependencies) يُنفَّذ setup بعد أن يظهر التغيير على الشاشة، لا أثناء الرندر نفسه. إن أرجعت دالة setup دالةً أخرى (cleanup)، يستدعيها React قبل تشغيل الـ effect التالي وعند إزالة المكوّن.

مصفوفة dependencies تتحكّم بموعد إعادة التشغيل: بلا مصفوفة يعمل بعد كل رندر، بمصفوفة فارغة [] يعمل مرة واحدة فقط بعد أول عرض، وبقيم داخلها يعمل كلما تغيّرت إحداها (بالمرجع لا بالمحتوى).

الصياغة

useEffect(() => {
  // كود التأثير
  return () => {
    // دالة التنظيف (اختيارية)
  };
}, [dependencies]);

📄 مثال

function Timer() {
  const [seconds, setSeconds] = useState(0);

  useEffect(() => {
    const id = setInterval(() => setSeconds((s) => s + 1), 1000);
    return () => clearInterval(id); // تنظيف عند إزالة المكوّن
  }, []);

  return <p>{seconds} ثانية</p>;
}

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

المعامل	الوظيفة
setup	الدالة التي تحتوي التأثير، يمكن أن تُرجع دالة تنظيف
dependencies	مصفوفة القيم التي عند تغيّرها يُعاد تشغيل الـ effect

💡 نصائح عملية

اذكر في مصفوفة الاعتماديات كل قيمة يستخدمها الـ effect فعليًا — لا تُسكِت تحذير الأداة بحذفها
استخدم useEffect لمزامنة كود خارجي (fetch، اشتراك، مؤقّت)، لا لحساب قيمة يمكن اشتقاقها مباشرة أثناء الرندر

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

نسيان مصفوفة الاعتماديات فيعمل الـ effect بعد كل رندر — قد يسبب حلقة إن كان يُحدّث حالة
نسيان دالة التنظيف لمؤقّت أو اشتراك — يبقى يعمل حتى بعد إزالة المكوّن

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