Ką daro React.memo ir kada jo verta naudoti?

Question

Accepted Answer

`React.memo` apvynioja komponentą, kad **praleistų pakartotinį renderavimą, kai jo props yra šiauriai lygūs su ankstesniu renderimu**. Pagal numatytuosius nustatymus, vaikas pakartotinai renderuojamas, kai tėvas vėl renduoja; `memo` tai nutraukia, kai props iš tikrųjų nepasikeitė. ```jsx const Row = React.memo(function Row({ item, onSelect }) { // re-renders only when `item` or `onSelect` reference changes return

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

; }); ``` ## Užduotis: reikalingi stabilūs props `memo` atlieka **šiaurią** palyginimą. Jei tėvas kiekvieną kartą renduoja naują objektą/masyvą/funkciją, palyginimas visada nepavyksta ir `memo` nieko nedaro: ```jsx function List({ items }) { // ❌ a NEW function every render → Row's onSelect prop always "changes" return items.map(i => pick(id)} />); } ``` Pataisykite stabilizavę funkciją su `useCallback`: ```jsx const onSelect = useCallback(id => pick(id), []); // same reference across renders return items.map(i => ); ``` ## Kada tai verta - Komponentas renduojamas **dažnai** su **tais pačiais** props ir jo renderavimas nėra trivialus (dideli sąrašai, brangūs subtree-ai). ## Kada nėra - Dauguma komponentų yra pigūs; pats palyginimas turi kainą, o viso daliko apvyniojimai sudėtingumą be naudos. **Pirmiausia profiluokite** naudodami React DevTools Profiler, tada memoize-uokite įrodytus hotspot-us — nememorize-uokite slepiai.