useEffect ينفذ الآثار الجانبية — العمل الذي يتجاوز عملية رسم React، مثل جلب البيانات والاشتراكات والمؤقتات والتحديثات اليدوية للـ DOM. يعمل بعد رسم المكون، مما يبقي الآثار الجانبية خارج جسم الرسم (يجب أن يظل الرسم نقياً).
useEffect(() => {
document.title = `Count: ${count}`;
}, [count]); // ← dependency array
[count] → ينفذ بعد الرسم الأول وكلما تغير count.[] (فارغة) → ينفذ مرة واحدة بعد التحميل (جيدة للإعداد لمرة واحدة).إذا قام التأثير بإعداد شيء يحتاج إلى إزالته، أرجع دالة تنظيف. يستدعيها React قبل تشغيل التأثير التالي وعند إزالة المكون:
useEffect(() => {
const id = setInterval(() => setN(n => n + 1), 1000);
return () => clearInterval(id); // cleanup → prevents a leaked timer
}, []);
بدونه، كل إعادة تشغيل ستضيف مؤقت/اشتراك آخر ولن تزيل القديم — تسريب ذاكرة كلاسيكي. دورة الحياة لتأثير [dep] هي: تشغيل التأثير → (تغيير dep) → تشغيل التنظيف → تشغيل التأثير مرة أخرى.
نصيحة: لا تستخدم التأثيرات للأشياء التي يمكنك حسابها أثناء الرسم (استخلص القيم بدلاً من ذلك)، وأدرج كل قيمة يقرأها التأثير في مصفوفة التبعيات (قاعدة lint react-hooks/exhaustive-deps تساعد).