شرح صفوف ومحتوى الفقرة
في طور التطوير، يتعمد غلاف <StrictMode> تشغيل دورة اختبار إضافية بالترتيب إعداد ← تنظيف ← إعداد فور تركيب المكون. فإذا لاحظت تضاعف سرعة العداد في وضع التطوير، لا تحذف الوضع الصارم، بل أصلح دالة التنظيف المفقودة التي كشفها لك مبكراً قبل وصول الكود للإنتاج! يوضح الجدول الآتي أزواج التنظيف القياسية:
| عملية الإعداد في التأثير | دالة التنظيف المتناظرة | نتيجة إهمال دالة التنظيف |
|---|---|---|
| تشغيل مؤقت دوري setInterval | إلغاء المؤقت عبر clearInterval(id) | تراكم مؤقتات مزدوجة وتضاعف سرعة العداد |
| جدولة تأخير زمني setTimeout | إلغاء الجدولة عبر clearTimeout(id) | تنفيذ متأخر غير مرغوب بعد مغادرة الشاشة |
| تسجيل مستمع window.addEventListener | إزالة المستمع عبر removeEventListener | تسرب ذاكرة وتكرار تنفيذ الحدث عشرات المرات |
| فتح اتصال أو أداة خارجية connect | إغلاق الاتصال عبر disconnect أو close | بقاء قنوات يتيمة مفتوحة وتداخل بيانات الغرف |
ملخص الدرس
حصاد الدرسمراجعة مركّزة لأهم المفاهيم والقواعد الهندسية التي أتقنتها في هذا الدرس قبل التطبيق العملي
ماذا تعلّمت في هذا الدرس؟
أتقنت في هذا الدرس كتابة دوال التنظيف في useEffect، وتتبعت ترتيب الإعداد والهدم عند تغير الاعتماديات وإزالة المكون، وألغيت المؤقتات ومستمعي النافذة بأمان مع استيعاب عقلية بدء وإيقاف المزامنة وفحص StrictMode. الخطوة التالية: انتقل الآن إلى الدرس رقم 36 «متى لا تحتاج إلى useEffect والبدائل الهندسية الأنظف» لمواصلة البناء التراكمي المتدرج في مسار React الحديث.