Aula 11 🚀

Performance: React.memo e Lazy Loading

---

O que vamos aprender hoje? 📚

1. React.memo
2. Code Splitting (lazy / Suspense)
3. Otimização de Ativos (Imagens)
4. Medindo com Profiler

---

1. React.memo 🧠

---

Pura Inteligência 🤖

• Só renderiza o componente se as Props mudaram.
• Essencial para componentes de lista pesados.

---

2. Lazy Loading 😴

---

Não carregue tudo de uma vez! 📦

• Divide seu site em pedaços (Chunks).
• O usuário só baixa o que vai usar.
• Site carrega muito mais rápido em mobiles.

---

Suspense ⏳

• O "enquanto isso" do React.
• Mostra um loading enquanto o código viaja pela rede.

---

3. Imagens e Mídia 📸

---

O Peso da Web 🏋️

• Use lazy-loading nativo nas imagens.
• Formatos modernos (WebP).
• Economize banda e bateria do seu usuário!

---

🚀 Desafio da Aula

• Implementar lazy loading nas rotas principais.
• Usar React.memo em cards repetitivos.

---

Fim da Aula 11 🎓

Próxima Aula: Redux Toolkit!