React.memo ਇੱਕ ਕੰਪੋਨੈਂਟ ਨੂੰ ਲਪੇਟਦਾ ਹੈ ਤਾਂ ਜੋ ਇਹ re-rendering ਨੂੰ ਛੱਡ ਦਿੰਦਾ ਹੈ ਜਦੋਂ ਇਸ ਦੇ props ਪਿਛਲੇ render ਨਾਲ shallow-equal ਹੋਵੇ। ਡਿਫਾਲਟ ਰੂਪ ਨਾਲ ਇੱਕ child ਕੰਪੋਨੈਂਟ ਹਰ ਵਾਰ re-render ਹੁੰਦਾ ਹੈ ਜਦੋਂ ਇਸ ਦੇ parent ਕਰਦੇ ਹਨ; 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} />);