Estado, eventos e useEffect

Controle dados na tela com useState, responda a eventos e sincronize efeitos colaterais com useEffect.

O que você vai aprender

• useState e atualizações
• Eventos controlados
• useEffect e dependências
• Limpeza de efeitos

1. useState

import { useState } from 'react';

function Counter() {
  const [n, setN] = useState(0);
  return (
    <button onClick={() => setN(n + 1)}>
      cliques: {n}
    </button>
  );
}

2. Inputs controlados

const [email, setEmail] = useState('');
<input
  value={email}
  onChange={(e) => setEmail(e.target.value)}
  placeholder="[email protected]"
/>

3. useEffect

useEffect(() => {
  document.title = `Contador: ${n}`;
}, [n]);

useEffect(() => {
  const id = setInterval(() => console.log('tick'), 1000);
  return () => clearInterval(id);
}, []);

4. Exercício

Faça um formulário de login (email + senha) que só habilita o botão quando ambos têm valor, e mostre um resumo ao enviar.

Sumário do curso