شرح صفوف ومحتوى الفقرة
اعتمد جدول القرار الهندسي التالي بوصلةً عملية لتحديد الموضع الصحيح لكل منطق برمجي داخل تطبيقات React:
| الهدف البرمجي | النمط الخاطئ بـ useEffect | الحل الهندسي الأنظف في React |
|---|---|---|
| تصفية القوائم أو حساب المجاميع | نسخ النتيجة في حالة ثانية داخل تأثير | حساب القيمة مباشرة بمتغير const أثناء العرض |
| تصفير حالة مكون فرعي عند تغير المعرّف | تصفير الحقول يدوياً داخل useEffect | تمرير خاصية key={id} للمكون الفرعي مباشرة |
| إرسال طلب أو إبلاغ الأب عند النقر | رفع راية حالة لتشغيل تأثير لاحق | تنفيذ الإجراء مباشرة داخل دالة الحدث onClick |
| مزامنة عنوان الصفحة أو مستمع النافذة | التعديل المباشر أثناء دالة التصيير | استخدام useEffect مع اعتماديات دقيقة وتنظيف |
خلاصة المعرفة ومحطة الانتقال
ملخص الدرس
حصاد الدرسمراجعة مركّزة لأهم المفاهيم والقواعد الهندسية التي أتقنتها في هذا الدرس قبل التطبيق العملي
ماذا تعلّمت في هذا الدرس؟
تعلّمت في هذا الدرس رصد وإزالة استدعاءات useEffect الزائدة عبر اشتقاق البيانات مباشرة أثناء التصيير، ومعالجة إجراءات المستخدم في دوال الأحداث، وتصفير حالة المكونات الفرعية فورياً بخاصية key، ودمج إبلاغ المكون الأب بكفاءة. الخطوة التالية: انتقل الآن إلى الدرس رقم 37 «جلب البيانات من واجهات API داخل مكونات React» لمواصلة البناء التراكمي المتدرج في مسار React الحديث.