React.memo एक घटक लपेटिन्छ ताकि यसको props अघिल्लो रेन्डरको साथ उथले-बराबर हुँदा पुनः-रेन्डरिङ छोड्छ। पूर्वनिर्धारितमा, जब अभिभावक फेरि रेन्डर हुन्छ तब बालबालिका पुनः-रेन्डर हुन्छ; memo यो काट्छ जब props वास्तवमा परिवर्तन भएको छैन।
= .( () {
;
});
memo उथले तुलना गर्छ। यदि अभिभावकले प्रत्येक रेन्डरमा नयाँ object/array/function पास गर्छ भने, तुलना सधैं असफल हुन्छ र memo केही गर्दैन:
function List({ items }) {
// ❌ a NEW function every render → Row's onSelect prop always "changes"
return items.map(i => <Row key={i.id} item={i} onSelect={id => pick(id)} />);
}
useCallback सँग फंक्शन स्थिर गरेर ठीक गर्नुहोस्:
const onSelect = useCallback(id => pick(id), []); // same reference across renders
return items.map(i => <Row key={i.id} item={i} onSelect={onSelect} />);