شرح صفوف ومحتوى الفقرة
تجنب تغليف كل زر صغير أو شارة نصية بدالة memo() بدافع العادة. فإذا كان المكون خفيفاً جداً أو كانت خصائصه تتغير فعلياً في كل تصيير كعداد الثواني الحي، فإن memo() ستجري حلقة فحص للخصائص ثم تعيد رسم المكون على أي حال، فتتحول إلى عبء إضافي بلا فائدة. يلخص الجدول التالي قرارات الاستخدام السليمة:
| حالة المكون الفرعي | أثر تغليف React.memo | القرار الهندسي الموصى به |
|---|---|---|
| مخطط أو جدول ثقيل بخصائص أولية ثابتة | يتخطى إعادة التصيير المكلفة بكفاءة عالية | غلّفه بـ memo وتأكد من النتيجة عبر Profiler |
| زر بسيط أو شارة نصية خفيفة جداً | تكلفة فحص الخصائص تعادل رسم العنصر نفسه | اتركه مكوناً دالياً عادياً لنظافة الكود |
| خصائصه تتغير فعلياً مع كل تصيير للأب | يجري المقارنة ثم يعيد الرسم في كل مرة | لا تغلفه لأن الفحص يصبح عملاً ضائعاً |
| يستقبل كائناً مضمناً جديداً في كل رسم | تفشل المقارنة السطحية ويعاد الرسم دائماً | مرر قيماً أولية أو ثبّت مرجع الكائن أولاً |
ملخص الدرس
حصاد الدرسمراجعة مركّزة لأهم المفاهيم والقواعد الهندسية التي أتقنتها في هذا الدرس قبل التطبيق العملي
ماذا تعلّمت في هذا الدرس؟
تعلمت في هذا الدرس كيف يتخطى تغليف React.memo إعادة التصيير الفائضة بالمقارنة السطحية عبر Object.is، ولماذا تكسر الكائنات المضمنة ثبات المرجع، ومتى يحقق التغليف فائدة حقيقية أو يصبح عبئاً غير مبرر. الخطوة التالية: انتقل الآن إلى الدرس رقم 44 «تخزين الحسابات والدوال عبر useMemo وuseCallback» لمواصلة البناء التراكمي المتدرج في مسار React الحديث.