شرح صفوف ومحتوى الفقرة
تقارن React كل عنصر في مصفوفة الاعتماديات بقيمته في التصيير السابق عبر خوارزمية Object.is(prevDep, nextDep). تتطابق النصوص والأرقام والقيم المنطقية بتساوي قيمها، أما إنشاء كائن جديد { roomId } أو مصفوفة جديدة مباشرة أثناء جسم التصيير فينتج عنوان ذاكرة مختلفاً في كل مرة فيعيد تشغيل التأثير بلا مبرر!
لضمان استقرار الاعتماديات، أنشئ كائنات الإعداد داخل دالة useEffect نفسها واعتمد في المصفوفة على القيم الأولية المباشرة مثل [serverUrl, roomId]، أو ارفع الثوابت الساكنة خارج المكون. يلخص الجدول التالي القواعد الكاملة:
| نمط مصفوفة الاعتماديات | توقيت تشغيل التأثير | الحالة الهندسية المناسبة |
|---|---|---|
| قيم أولية مثل [roomId, theme] | عند التركيب وعند تغير أي من القيمتين فقط | مزامنة عنوان الصفحة أو القناة أو التخزين المحلي |
| مصفوفة فارغة [] | مرة واحدة بعد رسم التركيب الأولي للمكون | تهيئة أداة خارجية لا تقرأ أي حالة أو خاصية |
| بدون تمرير مصفوفة ثانية | عقب كل تصيير يمر به المكون بلا استثناء | تشخيص نادر؛ خطر جداً إذا استُدعيت داخله setState |
| كائن منشأ بالعرض [{ id }] | في كل تصيير لأن المرجع الجديد يختلف بالذاكرة | نمط خاطئ — أنشئ الكائن داخل التأثير واعتمد على [id] |
ملخص الدرس
حصاد الدرسمراجعة مركّزة لأهم المفاهيم والقواعد الهندسية التي أتقنتها في هذا الدرس قبل التطبيق العملي
ماذا تعلّمت في هذا الدرس؟
تعلّمت في هذا الدرس كيف يزامن خطاف useEffect مكونات React مع الأنظمة الخارجية بعد رسم الشاشة، وأتقنت الحالات الثلاث لمصفوفة الاعتماديات، ومنعت حلقات التصيير اللانهائية ومشكلة المراجع المتغيرة مع مقارنة Object.is. الخطوة التالية: انتقل الآن إلى الدرس رقم 35 «دوال تنظيف التأثيرات ودورة حياة useEffect» لمواصلة البناء التراكمي المتدرج في مسار React الحديث.