useCallback x useMemo - Impacto na Performance
Demonstração prática mostrando a diferença real de performance
Controles
📊 Métricas de Performance
1
useCallback Renders
1
Sem useCallback Renders
3.53ms
useMemo Tempo
0.00ms
Sem useMemo Tempo
⚡ useCallback - Otimização de Funções
Impacto: O useCallback evita que funções sejam recriadas a cada render, reduzindo re-renders desnecessários de componentes filhos. Observe a diferença nos contadores de renderização.
Com useCallback (Otimizado)
Componente Otimizado (Value: 0)
Render: 1
✅ Função memorizada - menos re-renders
Sem useCallback (Não Otimizado)
Componente Não Otimizado (Value: 0)
Render: 1
❌ Função recriada a cada render
🧮 useMemo - Otimização de Cálculos
Impacto: O useMemo memoriza valores calculados, evitando recálculos desnecessários.Teste: Clique em Forçar Re-render para ver a diferença - o useMemo não recalcula, mas o sem useMemo sempre recalcula.
Com useMemo (Otimizado)
3.53ms
Resultado: 0
✅ Só recalcula quando count muda
Sem useMemo (Não Otimizado)
0.00ms
Resultado: 0
❌ Recalcula a cada render
📈 Análise de Performance
🎯 useCallback Performance
Renders Otimizados:1
Renders Não Otimizados:1
Diferença:0 renders economizados
⚡ useMemo Performance
Tempo Otimizado:3.53ms
Tempo Não Otimizado:0.00ms
Melhoria:-Infinity%
💡 Como Testar o Impacto
- 1. Digite no campo de texto para causar re-renders
- 2. Observe como os contadores de renderização mudam
- 3. Compare os tempos de cálculo entre useMemo e sem useMemo
- 4. Toggle as otimizações para ver a diferença
- 5. Abra o console para ver logs detalhados
🎓 Conclusões Práticas
✅ Quando Usar
- • useCallback: Funções passadas como props
- • useMemo: Cálculos caros ou transformações
- • Componentes que renderizam frequentemente
- • Quando performance é crítica
- • Após identificar gargalos com Profiler
❌ Quando NÃO Usar
- • Otimização prematura
- • Valores simples (strings, números)
- • Funções simples sem dependências
- • Sem medir performance primeiro
- • Quando não há problemas reais