Pular para conteúdo

Aula 13 - Estado e Hooks 🎣

Tornando seu App Interativo

Agenda 📅

  1. O que é o Estado (State)?
  2. Hook useState
  3. Lidando com Cliques e Eventos
  4. Inputs Controlados
  5. Imutabilidade e Arrays

1. O Problema da Estática 🧱

  • Variáveis comuns mudam nos bastidores...
  • ...mas a tela continua a mesma!
  • O React precisa de um sinal para re-desenhar.

2. useState: O Motor de Mudança 🚀

const [cont, setCont] = useState(0);
  1. cont: O valor atual.
  2. setCont: A função que atualiza.
  3. 0: O ponto de partida.

3. Eventos no React ⚡

  • onClick={funcao}
  • onChange={(e) => ...}
  • Sempre em CamelCase!

4. Inputs Controlados ⌨️

  • O React é quem manda no valor do input.
  • value={estado} + onChange.
  • Facilita validação e limpeza de campos.

5. Imutabilidade (Muito Importante!) 💎

  • Nunca altere o estado original: lista.push(x) ❌
  • Sempre crie uma cópia nova: setLista([...lista, x]) ✅

6. Fluxo de Dados 🌊

  • O estado flui do Pai para o Filho via Props.
  • Se o estado do Pai muda, todo mundo abaixo dele atualiza.

Desafio de Estado ⚡

Se eu tenho um botão que soma +1 ao contador, o que acontece com a interface se eu esquecer de importar o useState e usar uma variável global let contador = 0?

Resumo ✅

  • useState traz vida aos componentes.
  • Mudança de estado = Re-renderização.
  • Use sempre funções disparadoras (set...).

Próxima Aula: Efeitos e APIs 🌐

Buscando dados no mundo real!

  • Hook: useEffect.
  • Consumindo nossa API Backend.

Dúvidas? 🎣