Aula 10 🏗️
Hooks Avançados: useMemo, useCallback e useRef
O que vamos aprender hoje? 📚
- Memorização de Valores (useMemo)
- Memorização de Funções (useCallback)
- Acesso ao DOM e Referências (useRef)
- Quando Otimizar?
1. useMemo 🏎️
Pense antes de Calcular 🧠
- Serve para evitar cálculos caros desnecessários.
- "Gasta" memória para ganhar processamento.
- Só recalcula se as dependências mudarem.
2. useCallback ⚡
Estabilidade Referencial ⚓
- No React, tudo é recriado a cada render.
- Funções mudam de "identidade".
- O
useCallback mantém a função "viva" e estável.
3. useRef 📍
A Ponte para o Mundo Real 🌉
- Acesso direto a elementos HTML (foco, scroll).
- Variáveis que não disparam re-render.
- É uma "caixa" persistente.
Regra de Ouro 🛡️
- Não otimize por medo. Otimize por necessidade!
- Excesso de Hooks Avançados deixa o código complexo demais.
🚀 Desafio da Aula
- Criar uma lista filtrada com useMemo.
- Focar o input automaticamente com useRef.
Fim da Aula 10 🎓