Aula 04 – Hooks II: useEffect e Ciclo de Vida 🔄

Nesta aula, vamos entender como lidar com efeitos colaterais em nossos componentes, como buscar dados de APIs e sincronizar o React com o mundo exterior.

---

🛰️ O que são Efeitos Colaterais?

Efeitos colaterais (side effects) são ações que acontecem fora do fluxo de renderização do React. Exemplos: - Buscar dados de uma API (fetch). - Manipular o DOM diretamente (raro, mas acontece). - Configurar um cronômetro (setInterval).

---

🎣 O Hook useEffect

O useEffect nos permite executar código em momentos específicos do ciclo de vida do componente.

import { useEffect, useState } from 'react';

function ExemploEfeito() {
  useEffect(() => {
    console.log("O componente foi montado!");

    // Opcional: Função de limpeza (cleanup)
    return () => console.log("O componente será desmontado");
  }, []); // Array de dependências

  return <h1>Confira o console!</h1>;
}

---

📦 O Array de Dependências

O comportamento do useEffect muda drasticamente dependendo do que passamos no segundo argumento:

Array	Comportamento
Sem o array	Executa a cada renderização (Cuidado!).
Array vazio []	Executa apenas uma vez (quando o componente monta).
Com variáveis [prop, estado]	Executa sempre que uma dessas variáveis mudar.

---

🌐 Buscando Dados de uma API

O uso mais comum do useEffect é para carregar dados assim que a tela abre.

useEffect(() => {
  fetch('https://api.github.com/users/ricardotecpro')
    .then(res => res.json())
    .then(data => setUsuario(data));
}, []);

---

🚀 Prática da Aula

Vamos criar um buscador de usuários do GitHub.

1. Crie um estado para o usuario e outro para o nomeUsuario.
2. Use o useEffect para carregar os dados de um usuário padrão ao iniciar.
3. Adicione um botão que, ao ser clicado, dispara uma nova busca baseada no input.

Dica: Loading

Sempre crie um estado loading (true/false) para mostrar uma mensagem de "Carregando..." enquanto a API não responde. Isso melhora muito a experiência do usuário (UX).

---

🧩 Ciclo de Vida do Componente

graph LR
    A[Mounting] --> B[Updating]
    B --> C[Unmounting]
    style A fill:#dfd
    style B fill:#ffd
    style C fill:#fdd

- Mounting: Quando o componente nasce na tela. - Updating: Quando o estado ou as props mudam. - Unmounting: Quando o componente sai da tela.