React.memo एक घटक को लपेटता है ताकि यह तब री-रेंडरिंग को छोड़ दे जब इसके props पिछली रेंडरिंग के साथ उथले-बराबर हों। डिफ़ॉल्ट रूप से एक बच्चा जब भी उसका माता-पिता करता है तब री-रेंडर करता है; memo इसे शॉर्ट-सर्किट करता है जब props वास्तव में नहीं बदले थे।
= .( () {
;
});
memo एक उथली तुलना करता है। यदि माता-पिता प्रत्येक रेंडरिंग के साथ एक नई वस्तु/सरणी/फ़ंक्शन पास करता है, तो तुलना हमेशा विफल हो जाती है और 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} />);