Co robi React.memo i kiedy warto go używać?

Question

Accepted Answer

`React.memo` opakowuje komponent, aby **pominął re-render, gdy jego props są shallow-equal** w stosunku do poprzedniego renderowania. Domyślnie komponent podrzędny renderuje się za każdym razem, gdy robi to komponent nadrzędny; `memo` przerywa to, gdy props się faktycznie nie zmieniły. ```jsx const Row = React.memo(function Row({ item, onSelect }) { // re-renders only when `item` or `onSelect` reference changes return

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

; }); ``` ## Haczyk: wymaga stabilnych props `memo` wykonuje **shallow** porównanie. Jeśli komponent nadrzędny przekazuje nowy obiekt/tablicę/funkcję przy każdym renderowaniu, porównanie zawsze się nie powodzi i `memo` nic nie robi: ```jsx function List({ items }) { // ❌ a NEW function every render → Row's onSelect prop always "changes" return items.map(i => pick(id)} />); } ``` Napraw to, stabilizując funkcję za pomocą `useCallback`: ```jsx const onSelect = useCallback(id => pick(id), []); // same reference across renders return items.map(i => ); ``` ## Dlaczego to ważne - Komponent renderuje się **często** z **tymi samymi** props i jego renderowanie jest nietrywialne (duże listy, drogie poddrzewa). ## Kiedy nie warto - Większość komponentów jest tania; samo porównanie ma koszt, a opakowywanie wszystkiego dodaje złożoność bez korzyści. **Najpierw profileuj** za pomocą React DevTools Profiler, a potem memoizuj sprawdzone hotspoty — nie memoizuj ślepo.