React.memo ஒரு உপাদானை மூடிவிட்டு அதன் props முந்தைய render-க்கு shallow-equal ஆகும்போது re-rendering-ஐ பskip செய்கிறது. முன்னிருப்பாக, ஒரு child உপாதேயம் அதன் parent render-ஆகும்போதெல்லாம் re-render செய்யப்படுகிறது; memo props உண்மையாக மாறவில்லை என்றால் அதை குறுக்குவிடுகிறது.
= .( () {
;
});
memo ஒரு shallow ஒப்பீட்டை செய்கிறது. Parent ஒவ்வொரு render-க்கும் ஒரு புதிய 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} />);