Mitä React.memo tekee ja milloin sen käyttö kannattaa?

Question

Accepted Answer

`React.memo` käärii komponentin niin, että se **ohittaa uudelleenrenderöinnin, kun sen props ovat shallow-equal edellisen renderöinnin kanssa**. Oletusarvoisesti lapsikomponentti renderöidään uudelleen joka kerta kun sen pääkomponentti renderöidään; `memo` lyhentää tätä, kun props eivät oikeastaan muuttuneet. ```jsx const Row = React.memo(function Row({ item, onSelect }) { // re-renders only when `item` or `onSelect` reference changes return

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

; }); ``` ## Kiinnitys: se tarvitsee vakaita propsia `memo` tekee **shallow** vertailun. Jos pääkomponentti välittää uuden objektin/taulukon/funktion joka renderöinnin yhteydessä, vertailu epäonnistuu aina ja `memo` ei tee mitään: ```jsx function List({ items }) { // ❌ a NEW function every render → Row's onSelect prop always "changes" return items.map(i => pick(id)} />); } ``` Korjaa stabilisoimalla funktio `useCallback`:lla: ```jsx const onSelect = useCallback(id => pick(id), []); // same reference across renders return items.map(i => ); ``` ## Milloin se kannattaa - Komponentti renderöidään **usein** **samoilla** propsilla ja sen renderöinti on ei-triviaali (suuret listat, kalliit alipuut). ## Milloin se ei kannata - Useimmat komponentit ovat halpoja; itse vertailulla on kustannus, ja kaikkien kääriminen lisää monimutkaisuutta ilman hyötyä. **Profiloi ensin** React DevTools Profillerilla, sitten memoize todistetuista kuumista kohdista — älä memoize sokeasti.