Inputs controlados

A única fonte da verdade

Um <input> do HTML guarda seu próprio valor internamente. No React preferimos que esse valor viva no estado do componente: assim o estado é a única fonte da verdade e a UI sempre reflete exatamente o que está guardado.

Um input controlado combina duas coisas:

1. value={x} — o input mostra o valor do estado.
2. onChange={e => setX(e.target.value)} — cada vez que o usuário digita, atualizamos o estado com e.target.value (o texto atual do input).

function Eco() {
  const [texto, setTexto] = useState("");
  return (
    <div>
      <input value={texto} onChange={(e) => setTexto(e.target.value)} />
      <p>Você digitou: {texto}</p>
    </div>
  );
}

O fluxo é um círculo fechado: o usuário digita → dispara o onChange → setTexto muda o estado → o React renderiza de novo → o input mostra o novo value. O input nunca "decide" por conta própria: ele só reflete o estado.

Por que é útil

Como o valor está no estado, você pode lê-lo, transformá-lo ou validá-lo a qualquer momento: contar caracteres, passar para maiúsculas, desabilitar um botão se estiver vazio... tudo sem tocar no DOM diretamente.

<input
  value={nome}
  onChange={(e) => setNome(e.target.value.toUpperCase())}
/>

Regra prática: se você coloca value={...} deve colocar também onChange. Sem onChange, o input ficaria "congelado" e o usuário não conseguiria escrever.