React.memo وuseMemo وuseCallback — عمليًا

الهدف: استخدم ثلاث أدوات:

• React.memo — تخطّي إعادة تصيير المكوّن الابن إذا كانت الخصائص متساوية
• useMemo — حفظ القيم المشتقة مؤقتًا
• useCallback — الحفاظ على ثبات خصائص الدوال

استخدمها عندما:

• يكون المكوّن الابن مكلفًا أو لا يتغير غالبًا
• تكون البيانات المشتقة ثقيلة أو ثابتة
• تُمرَّر معالجات الأحداث إلى مكوّنات أبناء محفوظة مؤقتًا

حلّل الأداء قبل الإفراط في تحسينه.

يتخطى React.memo إعادة التصيير إذا كانت الخصائص نفسها. اقرنه مع useCallback للحفاظ على ثبات هوية معالج الأحداث.

احسب قائمة مشتقة باستخدام useMemo حتى تبقى هويتها ثابتة ما لم تتغير المدخلات.

مرّر onSelect ثابتًا إلى صف محفوظ مؤقتًا حتى لا تعيد الصفوف التي لم تتغير التصيير.

نصائح:

• احفظ العناصر مؤقتًا فقط عندما يعود ذلك بفائدة
• حافظ على صحة مصفوفات التبعيات
• فضّل الخصائص الثابتة لمساعدة React.memo

مراجعة: يتخطى React.memo عمليات إعادة التصيير عند تساوي الخصائص، ويثبت useMemo القيم المشتقة، ويحافظ useCallback على ثبات هويات معالجات الأحداث.