🚀 Capítulo 07: useEffect - Sentindo a Força

🎯 Objetivo da Aula

Ao final desta aula, você entenderá o que são os Efeitos Colaterais no React e saberá como usar o Hook useEffect para executar código em momentos específicos (como quando a tela carrega ou quando um dado muda).

---

🏢 O Cenário Prático (Seu Desafio)

Os sensores da sua nave precisam detectar a presença de naves inimigas. Toda vez que você mudar a velocidade da nave, o sensor precisa recalcular a distância do inimigo. Seu desafio é usar o useEffect para “sentir” a mudança na velocidade e recalcular essa distância!

---

🧠 Fundamentos: A Teoria Traduzida

O useEffect serve para lidar com coisas que acontecem “fora” do fluxo normal do componente (Efeitos Colaterais). Exemplos: buscar dados de uma API, atualizar o título da aba, ou escutar eventos.

A estrutura dele tem duas partes:

1. A Função: O código que você quer rodar.
2. O Array de Dependências: Uma lista de variáveis que o React fica “vigiando”.

Os 3 Comportamentos do useEffect:

1. Sem array de dependências: Roda a cada vez que a tela atualiza. (Raro usar).
2. Array vazio []: Roda apenas uma vez, quando o componente aparece na tela pela primeira vez. (Ótimo para buscar dados de APIs).
3. Com variáveis no array [velocidade]: Roda toda vez que a variável velocidade mudar.

---

📖 Exemplo Guiado: Sensor de Proximidade

Vamos vigiar a velocidade da nave.

🛠️ Passo a Passo

Abra o arquivo src/App.jsx.

1. Importe o useEffect junto com o useState:

import { useState, useEffect } from 'react';
 
function App() {
  const [velocidade, setVelocidade] = useState(0);
  const [distanciaInimigo, setDistanciaInimigo] = useState(1000);
 
  // useEffect vigiando a variável 'velocidade'
  useEffect(() => {
    console.log('A velocidade mudou! Recalculando distância...');
    
    // Simulação de cálculo: quanto mais rápido, mais perto chegamos do inimigo
    setDistanciaInimigo(1000 - (velocidade * 2));
    
  }, [velocidade]); // <- Array de dependências
 
  return (
    <div>
      <h1>📡 Sensores de Longo Alcance</h1>
      <p>Velocidade: **{velocidade} km/h**</p>
      <p>Distância do Inimigo: **{distanciaInimigo} km**</p>
      
      <button onClick={() => setVelocidade(velocidade + 10)}>
        Aumentar Velocidade
      </button>
    </div>
  )
}
 
export default App;

🕹️ Como Executar e Testar no VS Code

1. Salve e abra o navegador e o Console (F12).
2. Clique no botão. Você verá a distância diminuir e a mensagem aparecer no console a cada clique!

---

🛠️ Prática Obrigatória 1

Adicione um useEffect com o array de dependências vazio [] que mostre a mensagem “Sistemas Iniciados” no console apenas uma vez quando a tela carregar.

---

🛠️ Prática Obrigatória 2

Use o useEffect (vigiando a distância) para disparar um alert('🚨 CUIDADO: Inimigo muito próximo!') quando a distanciaInimigo for menor que 500.

---

🔑 Gabarito de Código/Fórmulas

Prática 1:

useEffect(() => {
  console.log('Sistemas Iniciados');
}, []); // Vazio = roda só no carregamento

Prática 2:

useEffect(() => {
  if (distanciaInimigo < 500) {
    alert('🚨 CUIDADO: Inimigo muito próximo!');
  }
}, [distanciaInimigo]);

---

← Capitulo Anterior | Proximo Capitulo →