Quando (e quando não) otimizar — Hooks personalizados e desempenho

A otimização prematura é um custo

React.memo, useMemo e useCallback não são de graça: cada um guarda valores em memória e compara dependências a cada render. Se você os aplica a tudo "por via das dúvidas", adiciona complexidade e às vezes até piora o desempenho.

"A otimização prematura é a raiz de todos os males." — Donald Knuth

Meça primeiro

A regra de ouro: meça antes de otimizar. Não otimize com base em intuições. Ferramentas para medir:

React DevTools → aba Profiler: mostra quais componentes re-renderizam e quanto demoram.
O destaque de renders ("highlight updates") para ver visualmente o que se repinta.
performance.now() para cronometrar cálculos concretos.

Quando SIM otimizar?

O Profiler mostra um componente lento que re-renderiza com frequência.
Um cálculo realmente caro (ordenar/filtrar milhares de elementos) roda a cada render.
Uma lista longa se repinta inteira ao mudar um único elemento.

Quando NÃO?

Componentes pequenos e baratos: memoizá-los não acrescenta nada.
Antes de ter um problema mensurável. Se você não percebe lentidão, não a invente.
Como hábito automático em cada componente: suja o código sem benefício.

Melhor que memoizar: reduzir o trabalho

Muitas vezes a melhor otimização não é memo, mas mudar a estrutura:

Suba o estado apenas o necessário e desça os componentes que não dependem dele, para que não re-renderizem.
Passe conteúdo como children para que não seja recriado.
Divida componentes grandes em peças menores e mais focadas.

Ordem correta: 1) escreva código claro, 2) meça se há um problema real, 3) otimize apenas o que o Profiler apontar, 4) meça novamente para confirmar a melhoria.