Kaj počne React.memo in kdaj se ga splača uporabljati?

Question

Accepted Answer

`React.memo` prepleta komponento, da **preskoči ponovno risanje, kadar so njene props shallow-equal** prejšnjemu risanju. Privzeto se podrejena komponenta ponovno nariše, kadar koli to naredi nadrejena; `memo` to prekine, ko se props pravzaprav niso spremenile. ```jsx const Row = React.memo(function Row({ item, onSelect }) { // re-renders only when `item` or `onSelect` reference changes return

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

; }); ``` ## Ulov: potrebne so stabilne props `memo` naredi **plitko** primerjavo. Če nadrejena pri vsakem risanju prosledi nov objekt/polje/funkcijo, primerjava vedno ne uspe in `memo` ne naredi nič: ```jsx function List({ items }) { // ❌ a NEW function every render → Row's onSelect prop always "changes" return items.map(i => pick(id)} />); } ``` Popravi z stabilizacijo funkcije z `useCallback`: ```jsx const onSelect = useCallback(id => pick(id), []); // same reference across renders return items.map(i => ); ``` ## Kdaj se ga splača - Komponenta se rišče **pogosto** z **istimi** props in je njeno risanje netrivialno (velike sezname, drage poddrevo). ## Kdaj se ne splača - Večina komponent je poceni; sama primerjava ima stroške in ovitje vsega doda zapletenost brez koristi. **Profilujte prvo** s React DevTools Profiler, nato memoizirajte dokazane vroče točke — nememoizirajte slepo.