Performance

React.memo — quando NÃO usar

Componentes muito leves custam mais para memoizar do que para re-renderizar normalmente.

Definição

React.memo tem um custo computacional próprio: a comparação de props executa a cada render do componente pai. Para componentes triviais ou que recebem props que mudam constantemente, esse custo supera o benefício.

Problema → Solução

Problema

React.memo tem custo próprio: comparação de props a cada render do pai. Para componentes triviais, esse custo supera o benefício.

Solução

Só memoizar componentes pesados que recebem as mesmas props com frequência.

Dica de entrevista

Tip

Meça com React Profiler antes de memoizar. Muitas vezes o problema está no pai, não no filho.

Código

// ❌ Memo desnecessário
const Badge = React.memo(({ count }) => (
  <span>{count}</span>
));

// ✅ Memo que justifica
const DataTable = React.memo(({ rows, columns }) => (
  <table>{/* ...50ms de render */}</table>
));

Perguntas de entrevista

Q.Como descobrir se um componente precisa de memo?▾

A.React DevTools Profiler → 'Record why each component rendered'. Se aparece 'Props changed: ' com props que poderiam ser estáveis, memo + estabilizar refs ajuda. Se 'Hooks changed' ou 'Parent rendered', memo não resolve.

Q.Componente com children sempre quebra memo?▾

A.Se children for JSX inline, sim — JSX é objeto novo a cada render. Solução: passar children memoizados via useMemo, ou usar context para evitar passar via props.

Q.Memo + useCallback é overkill?▾

A.Frequentemente sim. Use só quando profiling mostra ganho real. Em apps pequenos/médios, geralmente não há diferença perceptível e o código fica mais difícil de ler.

11/122← →