Estado com useState — Componentes, JSX e estado

Estado

As props vêm de fora e não mudam. O estado é a informação que o componente gerencia e pode mudar com o tempo (um contador, um texto que se digita...). Quando o estado muda, o React renderiza novamente o componente.

O estado é declarado com o hook useState:

function Contador() {
  const [contagem, setContagem] = useState(0);

  return (
    <div>
      <p>Você clicou {contagem} vezes</p>
      <button onClick={() => setContagem(contagem + 1)}>Somar</button>
    </div>
  );
}

useState(0) cria um estado com valor inicial 0.
Retorna um array: o valor atual (contagem) e uma função para mudá-lo (setContagem).
Nunca modifique o estado diretamente (contagem++). Use sempre a função (setContagem(...)): é ela que avisa ao React que ele deve repintar.

Nos exercícios, o useState (e outros hooks) já estão disponíveis: você pode usá-los diretamente, sem importá-los.