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

مثال على الاستخدام:

import React from 'react';

const MyComponent = ({ count }) => {
  console.log('Component re-rendered');
  return 
Count: {count}
;
};

export default React.memo(MyComponent);

في هذا المثال، لن يُعاد عرض MyComponent إلا إذا تغيرت خاصية count. إذا تم إعادة عرض المكون الأصلي لكن خاصية العد ظلت كما هي، فلن يتم إعادة عرض MyComponent، مما يقلل من العمليات الحسابية غير الضرورية.

افتراضيًا، يقوم React.memo بإجراء مقارنة سطحية للدعائم، ولكن يمكنك أيضًا توفير وظيفة مقارنة مخصصة لإجراء فحوصات أعمق إذا لزم الأمر:

const MyComponent = React.memo((props) => {
  /* component code */
}, (prevProps, nextProps) => {
  // return true if props are equal, false otherwise
  return prevProps.someValue === nextProps.someValue;
});

يمكن أن يؤدي ذلك إلى تحسين الأداء بشكل أكبر عندما يكون لديك هياكل دعائم أكثر تعقيدًا.