Hvad gør React.memo, og hvornår er det værd at bruge det?

Question

Accepted Answer

`React.memo` omslutter en komponent, så den **springer re-rendering over, når dens props er shallow-equal med den forrige render**. Som standard re-renders et barn-komponent hver gang dets forælder gør; `memo` afbryder dette, når props faktisk ikke har ændret sig. ```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: det har brug for stabile props `memo` gør en **shallow** sammenligning. Hvis forælderen passerer et nyt objekt/array/funktion hver render, mislykkes sammenligningen altid, og `memo` gø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 at stabilisere funktionen med `useCallback`: ```jsx const onSelect = useCallback(id => pick(id), []); // same reference across renders return items.map(i => ); ``` ## Hvornår det er værd det - En komponent renderes **ofte** med de **samme** props, og dens render er ikke-trivial (store lister, dyre subtræer). ## Hvornår det ikke er - De fleste komponenter er billige; sammenligningen selv har en omkostning, og at omslutter alt tilføjer kompleksitet uden gevinst. **Profiler først** med React DevTools Profiler, derefter memoizer de dokumenterede hotspots — memoizer ikke blindt.