Što React.memo radi i kada je vrijedan?

Question

Accepted Answer

`React.memo` omota komponentu kako bi **preskočila ponovno renderiranje kada su njezina svojstva plitko-jednaka prethodnom renderiranju**. Po zadanom, dijete se ponovno renderira svaki put kada se ponovno renderira njegov nadređeni element; `memo` to kratko-spaja kada se svojstva zapravo nisu promijenila. ```jsx const Row = React.memo(function Row({ item, onSelect }) { // re-renders only when `item` or `onSelect` reference changes return

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

; }); ``` ## Catch: trebam stabilna svojstva `memo` izvršava **plitku** usporedbu. Ako nadređeni element proslijedi novi objekt/polje/funkciju pri svakom renderiranju, usporedba će uvijek biti neuspješna i `memo` neće učiniti ništa: ```jsx function List({ items }) { // ❌ a NEW function every render → Row's onSelect prop always "changes" return items.map(i => pick(id)} />); } ``` Ispravite tako što ćete stabilizirati funkciju sa `useCallback`: ```jsx const onSelect = useCallback(id => pick(id), []); // same reference across renders return items.map(i => ); ``` ## Kada je vrijedan - Komponenta se renderira **često** s **istim** svojstvima, a njezino renderiranje je netrivijalno (veliki popisi, skupi podaci). ## Kada nije - Većina komponenti su jeftine; sama usporedba ima trošak, a omotavanje svega dodaje kompleksnost bez beneifcija. **Prvo profilaire** s React DevTools Profiler-om, zatim memorizirajte dokazane hotspot-e — nememoizirajte slijepo.