Pular para conteúdo

Aula 14 - Efeitos e APIs 🌐

Conectando seu App ao Mundo Real

Agenda 📅

  1. O que são Side Effects?
  2. Hook useEffect
  3. O Array de Dependências
  4. Buscando dados com fetch
  5. Estados de Carregamento e Erro

1. Além da Interface 🧪

  • Efeitos colaterais são ações que tocam o mundo externo ao componente.
  • Ex: Buscar usuários, mudar o título da aba, iniciar um cronômetro.

2. useState vs useEffect 🥊

  • useState: Para dados que o usuário vê mudando.
  • useEffect: Para ações que o componente faz "sozinho".

3. Os 3 Momentos do useEffect 🕒

  1. Montagem: Quando o componente nasce.
  2. Atualização: Quando um dado monitorado muda.
  3. Desmontagem: Quando o componente morre (Cleanup).

4. O Array de Dependências [] 🗃️

  • [] -> Roda só uma vez.
  • [cont] -> Roda sempre que cont mudar.
  • Sem array -> Roda em toda atualização (Perigo!).

5. Chamadas de API (Fetch) 📨

useEffect(() => {
  fetch("https://api...")
    .then(res => res.json())
    .then(data => setData(data));
}, []);

6. UX: Estados de Rede 🛡️

  • Loading: Mostre um Spinner enquanto espera.
  • Error: Avise se a internet caiu ou o usuário não existe.
  • Empty: Diga se não há resultados.

Desafio de Efeito ⚡

Se você colocar um alert("Olá") dentro de um useEffect sem o array [], quantas vezes o alerta vai aparecer se o usuário ficar digitando em um campo de texto que atualiza o estado?

Resumo ✅

  • useEffect organiza as ações assíncronas.
  • Controle quando rodar via array de dependências.
  • Trate sempre o carregamento e erros para uma boa UX.

Próxima Aula: Navegação 🚦

Multi-páginas com React Router!

  • /home, /perfil, /contato.
  • Links e Navegação Programática.

Dúvidas? 🌐