useEffect خطّاف الآثار الجانبية
آخر تحديث: 2026-11-03
useEffect خطّاف الآثار الجانبية
useEffect هو البيت التصريحي للآثار الجانبية — جلب البيانات والاشتراكات والمؤقّتات والعمل المباشر على DOM. وهو يعمل بعد العرض، وتعمل دالة التنظيف التي يُعيدها قبل الأثر التالي وعند إزالة المكوّن.
| المجموعة | الآثار الجانبية والأداء |
|---|---|
| النوع | خطاف |
| منذ الإصدار | React 16.8 |
ℹ️ ملاحظة يحوّل المحرّر JSX إلى JavaScript ويعرض الواجهة الحقيقية داخل بيئة معزولة؛ تُركَّب المكوّنات تلقائياً دون استدعاء render يدوي.
📝 الصيغة
useEffect(() => {
// أثر جانبي
return () => { /* التنظيف */ }
}, [deps]) // [] عند التركيب فقط؛ [a, b] عند التغيّر؛ حذفها = عند كل عرض⚙️ المعاملات
| effect function | جسم الأثر، ويُنفَّذ بعد العرض. ويمكنه إعادة دالة تنظيف. |
|---|---|
| deps (optional dependency array) | يتحكّم في التوقيت: [] ينفّذ مرة واحدة بعد التركيب؛ و [a, b] يُعيد التنفيذ عند تغيّر أيّ منهما؛ وحذفها يُعيد التنفيذ بعد كل عرض. |
القيمة المرجعة：لا شيء. أعِد دالة تنظيف من الأثر حين يلزم تفكيك شيء ما.
▶ مثال
المثال يعمل مباشرة: يُعرض تلقائياً عند التوسيع وتظهر التعديلات فوراً.
الناتج：
يعرض «Running for 0s» ويزيد العدّاد كل ثانية؛ ويُمسح الفاصل عند إزالة المكوّن — بلا تسريبات.💡 النقاط الأساسية
💡 نصيحة كل setInterval أو addEventListener أو اشتراك يحتاج عملياً إلى تنظيف — وإلا ظلّ يعمل بعد إزالة المكوّن.
⚠️ تحذير إغفال اعتمادية كائن أو دالة هو المصدر الأول للخلل: المراجع الجديدة في كل عرض تجعل الأثر يُنفَّذ بلا نهاية.
ℹ️ ملاحظة [] تعني «ما يتعلق بالتركيب فقط» — فكّر مرتين قبل إسكات تحذير exhaustive-deps.
🏷️ المزيد من الآثار والأداء
💡 حالات ذات صلة
المزيد من الحالات قريباً.
📚 دروس ذات صلة
❓ الأسئلة الشائعة
س ما العلاقة بين useEffect وطرق دورة الحياة؟
ج useEffect واحد (مع تنظيف) يغطي componentDidMount و componentDidUpdate و componentWillUnmount دفعة واحدة — فكّر في تغيّر الاعتماديات لا في مراحل دورة الحياة.
س لماذا يدور useEffect إلى الأبد؟
ج غالباً لأن اعتمادية كائن أو دالة تُعاد إنشاؤها في كل عرض، أو لأن setState يعدّل قيمة يعتمد عليها الأثر. راجع مدخل «مزالج الآثار الجانبية».
س متى تعمل دالة التنظيف؟
ج مرتين: قبل تشغيل الأثر التالي مباشرة (نظّف القديم ثم شغّل الجديد)، وعند إزالة المكوّن.
