Vad gör React.memo och när är det värt att använda det?

Question

Accepted Answer

`React.memo` slår in en komponent så att den **hoppar över omrendering när dess props är shallow-equal** jämfört med föregående rendering. Som standard omrenderas ett barnkomponent när dess förälder gör det; `memo` avbryter det när props faktiskt inte ändrades. ```jsx const Row = React.memo(function Row({ item, onSelect }) { // re-renders only when `item` or `onSelect` reference changes return

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

; }); ``` ## Fångsten: det behöver stabila props `memo` gör en **shallow**-jämförelse. Om föräldern passerar ett nytt objekt/array/funktion varje rendering, misslyckas jämförelsen alltid och `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)} />); } ``` Löst genom att stabilisera funktionen med `useCallback`: ```jsx const onSelect = useCallback(id => pick(id), []); // same reference across renders return items.map(i => ); ``` ## När det är värt det - En komponent renderas **ofta** med **samma** props och dess rendering är icke-trivial (stora listor, dyra underträd). ## När det inte är det - De flesta komponenter är billiga; själva jämförelsen har en kostnad, och att slå in allt adderar komplexitet utan vinst. **Profilera först** med React DevTools Profiler, sedan memoizera de bevisade hotspots — memoizera inte blindt.