Hva gjør React.memo og når er det verdt å bruke?

Question

Accepted Answer

`React.memo` pakker inn en komponent slik at den **hopper over re-rendering når props er shallow-equal** med forrige render. Som standard re-rendrer en child komponent når som helst forelderen gjør det; `memo` avkorter det når props faktisk ikke har endret seg. ```jsx const Row = React.memo(function Row({ item, onSelect }) { // re-renders only when `item` or `onSelect` reference changes return

onSelect(item.id)}>{item.name}

; }); ``` ## Fangsten: den trenger stabile props `memo` gjør en **shallow** sammenligning. Hvis forelderen sender et nytt objekt/array/function hver render, feiler sammenligningen alltid og `memo` gjør ingenting: ```jsx function List({ items }) { // ❌ a NEW function every render → Row's onSelect prop always "changes" return items.map(i => pick(id)} />); } ``` Fiks ved å stabilisere funksjonen med `useCallback`: ```jsx const onSelect = useCallback(id => pick(id), []); // same reference across renders return items.map(i => ); ``` ## Når det er verdt det - En komponent rendrer **ofte** med **samme** props og renderingen er ikke-trivial (store lister, dyre undertrær). ## Når det ikke er - De fleste komponenter er billige; sammenligningen selv har en kostnad, og å pakke inn alt legger til kompleksitet uten gevinst. **Profile først** med React DevTools Profiler, deretter memoize de beviste hotspots — ikke memoize blindt.