Aula 04 🔄

Hooks II: useEffect e Ciclo de Vida

---

O que vamos aprender hoje? 📚

1. Efeitos Colaterais (Side Effects)
2. O Hook useEffect
3. Array de Dependências
4. Buscando dados de APIs (Fetch)

---

1. Efeitos Colaterais 🛸

---

O que são? 🤔

• Ações fora do controle do React.
• Mudança de título da aba.
• Chamadas de API.
• Timers e Intervalos.

---

2. O Hook useEffect 🎣

---

Sincronização Perfeita 🕰️

• Permite executar código em momentos chave.
• Quando o componente nasce.
• Quando o componente morre.
• Quando algo muda.

---

Sintaxe do Código 💻

useEffect(() => {
  // O código do efeito aqui
}, [dependencias]);

---

3. As Dependências 📦

---

Os 3 Cenários 📊

1. Sem array: Roda TODA HORA.
2. Array vazio []: Roda UMA VEZ (Mount).
3. Com variáveis [counter]: Roda quando elas mudam.

---

O Cleanup (Limpeza) 🧹

• Função de retorno do useEffect.
• Serve para parar timers e cancelar assinaturas.
• Evita vazamento de memória!

---

4. Consumo de API 🌐

---

Fetch API 📡

fetch('url')
  .then(res => res.json())
  .then(data => setEstado(data));

---

Boa Experiência (UX) ✨

• Sempre use um estado de Loading.
• Informe ao usuário que algo está acontecendo!

---

🚀 Desafio da Aula

• Criar um buscador de clima ou de usuários do GitHub.
• Usar useEffect para carregar dados iniciais.
• Mostrar "Carregando..." enquanto espera.

---

Fim da Aula 04 🎓

Próxima Aula: Estilização Avançada!