Inputs controlados

La única fuente de verdad

Un <input> de HTML guarda su propio valor internamente. En React preferimos que ese valor viva en el estado del componente: así el estado es la única fuente de verdad y la UI siempre refleja exactamente lo que hay guardado.

Un input controlado combina dos cosas:

1. value={x} — el input muestra el valor del estado.
2. onChange={e => setX(e.target.value)} — cada vez que el usuario teclea, actualizamos el estado con e.target.value (el texto actual del input).

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

El flujo es un círculo cerrado: el usuario teclea → se dispara onChange → setTexto cambia el estado → React vuelve a renderizar → el input muestra el nuevo value. El input nunca "decide" por su cuenta: solo refleja el estado.

Por qué es útil

Como el valor está en el estado, puedes leerlo, transformarlo o validarlo en cualquier momento: contar caracteres, pasar a mayúsculas, deshabilitar un botón si está vacío... todo sin tocar el DOM directamente.

<input
  value={nombre}
  onChange={(e) => setNombre(e.target.value.toUpperCase())}
/>

Regla práctica: si pones value={...} debes poner también onChange. Sin onChange, el input quedaría "congelado" y el usuario no podría escribir.