📚 Tópicos 📊 Sumário de Slides

📊 Capítulo 05: useMemo, useCallback & React.memo

Especialização em Frontend com React

---

🗺️ A Árvore de Decisão da Otimização de Renderização

flowchart TD
    Q1{"O cálculo matemático ou filtro é computacionalmente pesado (>1ms)?"}
    Q1 -- "SIM" --> USE_MEMO["useMemo(() => calcular(dados), [dados])\n(Guarda o RESULTADO do cálculo em cache)"]
    Q1 -- "NÃO" --> Q2{"Você está passando uma função como prop para um componente filho memoizado?"}
    Q2 -- "SIM" --> USE_CALLBACK["useCallback(() => lidarClique(), [dependencias])\n(Mantém a mesma REFERÊNCIA de função entre renders)"]
    Q2 -- "NÃO" --> SIMPLE["Deixe a função ou variável normal! (Otimização prematura adiciona overhead)"]

    style Q1 fill:#ede7f6,stroke:#512da8,stroke-width:2px
    style USE_MEMO fill:#e8f5e9,stroke:#4caf50,stroke-width:2px
    style Q2 fill:#fff3e0,stroke:#ff9800,stroke-width:2px
    style USE_CALLBACK fill:#e1f5fe,stroke:#03a9f4,stroke-width:2px
    style SIMPLE fill:#c8e6c9,stroke:#2e7d32,stroke-width:1.5px

---

🎯 Slide 1: useMemo para Cálculos Derivados

const relatorioFiltrado = useMemo(() => {
  return transacoes.filter(t => t.categoria === filtro && t.valor > min);
}, [transacoes, filtro, min]);

---

🎯 Slide 2: useCallback + React.memo

• Passar uma função normal (const onClick = () => {}) cria uma nova referência na memória a cada render, quebrando a proteção do React.memo(Filho)!

• Com useCallback: O filho só re-renderiza se as dependências reais mudarem!

---

🎯 Slide 3: O Impacto do React Compiler no React 19

• No React 19 com o compilador ativo, o próprio compilador injeta memoizações granulares equivalentes automaticamente, tornando o uso manual de useMemo cada vez mais raro!

---

🔗 Navegação do Capítulo 05

📖 Ler Conteúdo Completo

🧠 Fazer Quiz

💻 Ver Exemplos

🧩 Exercícios

Slide 1 de 1

Atalhos: ← → Navegar • Espaço Avançar • F Tela Cheia • Home Início • End Fim