React.memo ఒక కాంపోనెంట్ను చుట్టుముట్టి దాని props గత రెండర్కు shallow-equal ఉన్నప్పుడు re-renderingను దాటిపోయేలా చేస్తుంది. డిఫాల్ట్గా ఒక చైల్డ్ దాని పేరెంట్ చేసిన ప్రతిసారీ re-render చేయబడుతుంది; memo props నిజానికి మారనప్పుడు దానిని short-circuit చేస్తుంది.
= .( () {
;
});
memo shallow పోలికను చేస్తుంది. పేరెంట్ ప్రతిసారీ రెండర్కు నতুన 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} />);