O que React.memo faz e quando vale a pena usá-lo?

Question

Accepted Answer

`React.memo` envolve um componente para que ele **pule a re-renderização quando suas props são shallow-equal** em relação à renderização anterior. Por padrão, um componente filho é re-renderizado sempre que seu pai faz isso; `memo` interrompe isso quando as props não mudaram de fato. ```jsx const Row = React.memo(function Row({ item, onSelect }) { // re-renders only when `item` or `onSelect` reference changes return

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

; }); ``` ## O porém: requer props estáveis `memo` faz uma comparação **shallow**. Se o pai passa um novo objeto/array/função a cada renderização, a comparação sempre falha e `memo` não faz nada: ```jsx function List({ items }) { // ❌ a NEW function every render → Row's onSelect prop always "changes" return items.map(i => pick(id)} />); } ``` Corrija estabilizando a função com `useCallback`: ```jsx const onSelect = useCallback(id => pick(id), []); // same reference across renders return items.map(i => ); ``` ## Por que isso importa - Um componente renderiza **frequentemente** com as **mesmas** props e sua renderização é não trivial (listas grandes, subárvores custosas). ## Quando não vale - A maioria dos componentes é barata; a própria comparação tem um custo, e envolver tudo adiciona complexidade sem ganho. **Faça o perfil primeiro** com o React DevTools Profiler e depois memoize os hotspots comprovados — não memoize cegamente.