devterview_$ iniciar simulação

`memo`, `useMemo` e `useCallback`: quando ajudam e quando são ruído

DifícilSêniorPerformance

Pergunta

Quando `React.memo`, `useMemo` e `useCallback` realmente melhoram performance, e por que aplicá-los por reflexo pode piorar?

Resposta esperada

`React.memo` evita re-render de um componente se as props não mudaram (comparação rasa). `useMemo` cacheia o resultado de um cálculo caro entre renders; `useCallback` cacheia a identidade de uma função (útil pra não quebrar o `memo` de um filho, ou como dep estável de um efeito). Ajudam quando: há um cálculo genuinamente caro no render, ou uma subárvore grande que re-renderiza à toa por causa de uma prop de função/objeto recriada. Pioram (ou não ajudam) quando aplicados sem medir: cada um tem custo — a comparação de props, o array de deps, a alocação do cache — e pra componentes baratos isso é overhead puro; além disso, `useMemo`/`useCallback` com deps mal feitas viram fonte de bug (valor velho preso). Regra: perfile primeiro (React DevTools Profiler), otimize o que aparece, e prefira consertar a causa (estrutura de estado, componente que não devia receber aquela prop) a espalhar memo.

Por que perguntam isso

Pergunta pleno/sênior. O sinal de maturidade é 'perfile antes' e 'consertar a causa', não decorar quando usar cada hook.

#memo#usememo#usecallback#performance
publicidade

Relacionadas