تكرار السؤال: …
الإجابة المختصرة
لأن React.memo يضيف مقارنة فحص سطحي (Shallow Compare) لكافة الـ Props في كل render؛ فإذا كانت الـ props تتغير دائماً أو كان المكون بسيطاً، فإن المقارنة تكون عبئاً إضافياً دون جدوى.
الشرح
يقوم React.memo بمقارنة prevProps و nextProps بواسطة Object.is. إذا كان المكون يتلقى دائماً كائنات جديدة أو دوال غير مثبتة أو كان يستهلك أجزاء سريعة التغير، فإن كلفة إجراء المقارنة السطحية تضاف إلى كلفة الـ render بدلاً من توفيرها. يفضل قصر memo على المكونات الثقيلة برمجياً أو التي تعيد نفس المخرجات كثيراً.
مثال بالكود
// لا داعي لاستخدام memo هنا لصغر المكون
function SimpleBadge({ label }: { label: string }) {
return <span className="badge">{label}</span>;
}
// استخدام سليم لـ memo لمكون ثقيل يعاد تصييره مع ثبات الـ props
export const HeavyTable = React.memo(function HeavyTable({ rows }: { rows: Row[] }) {
return <table>{/* آلاف العمليات الحسابية */}</table>;
});أخطاء شائعة
- تغليف مكون بـ React.memo مع تمرير كائن جديد أو inline callback مثل onClick={() => doSomething()} دون useCallback.
أسئلة متابعة
- ما الفرق بين useMemo و useCallback ومتى يكون استخدامهما ضاراً بالأداء؟
- كيف تتجنب إنشاء كائنات ومراجع جديدة في جسم المكون (Inline Objects & Arrays) أثناء الـ Render؟