React.memo एक उच्च-क्रम वाला घटक है जिसका उपयोग कार्यात्मक घटकों के अनावश्यक पुन: प्रस्तुतीकरण को रोककर प्रदर्शन को अनुकूलित करने के लिए रिएक्ट में किया जाता है। यह एक घटक के परिणाम को याद करके काम करता है और यदि इसके प्रॉप्स बदलते हैं तो केवल इसे पुन: प्रस्तुत करता है। यह कार्यात्मक घटकों में प्रदर्शन अनुकूलन के लिए उपयोगी है जो समान प्रॉप्स दिए जाने पर समान आउटपुट प्रस्तुत करता है।

उदाहरण उपयोग:

import React from 'react';

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

export default React.memo(MyComponent);

इस उदाहरण में, MyComponent केवल तभी पुन: प्रस्तुत करेगा यदि काउंट प्रोप बदलता है। यदि मूल घटक पुन: प्रस्तुत होता है लेकिन गिनती प्रोप वही रहता है, तो 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;
});

जब आपके पास अधिक जटिल प्रोप संरचनाएं हों तो यह प्रदर्शन को और अधिक अनुकूलित कर सकता है।