كيف تتجنب إنشاء كائنات ومراجع جديدة في جسم المكون (Inline Objects & Arrays) أثناء الـ Render؟

الإجابة المختصرة

بتعريف الثوابت خارج نطاق دالة المكون إذا كانت لا تعتمد على الـ Props، أو تغليف الكائنات المعتمدة بـ useMemo لتثبيت المرجع الممرض للمكونات الفرعية.

الشرح

في كل مرة يُعاد فيها تصيير المكون، يتم إنشاء مراجع جديدة لأي كائن أو مصفوفة معرّفة بداخله (مثل style={{ margin: 10 }} أو options={["a", "b"]}). هذا المرجع الجديد يفشل مقارنة Object.is ويؤدي لإعادة تصيير المكونات الفرعية المحمية بـ memo دون داعٍ.

مثال بالكود

// ثوابت ثابتة تعرف خارج نطاق المكون تماماً
const DEFAULT_OPTIONS = ['الكل', 'المفعلة', 'المعطلة'];

function FilterBar({ onSelect }: { onSelect: (val: string) => void }) {
  // استخدام الثابت الخارجي الموحد
  return <OptionsList items={DEFAULT_OPTIONS} onSelect={onSelect} />;
}

أخطاء شائعة

• كتابة inline objects كـ props في مكونات تكرارية داخل حلقات map.

أسئلة متابعة

• ما هي تكلفة React.memo ولماذا لا يجب استخدامه افتراضياً على كافة المكونات؟

المصادر

• React docs — useMemo
• React docs — memo