¿Cuál es la diferencia entre input controlado y no controlado y cuándo usar cada uno?

Entrada controlada — es un elemento de formulario cuyo valor está completamente controlado por el estado del componente (por ejemplo, en React). El valor del campo se almacena en el estado y se actualiza mediante un manejador de eventos.

Entrada no controlada — es un elemento de formulario que es gestionado por el DOM en lugar del estado del componente. El valor se lee a través de referencias cuando es necesario.

Cuándo usar:

• La entrada controlada es conveniente cuando se necesita reaccionar inmediatamente a los cambios, validar datos, sincronizar con el estado de la aplicación.
• La entrada no controlada es más simple y rápida para formularios sencillos donde no se requiere un control constante de la entrada.

Ejemplo de entrada controlada en React:

function MyInput() {
  const [value, setValue] = React.useState('');
  return <input value={value} onChange={e => setValue(e.target.value)} />;
}

Ejemplo de entrada no controlada:

function MyInput() {
  const inputRef = React.useRef(null);
  const handleSubmit = () => {
    alert(inputRef.current.value);
  };
  return <>
    <input ref={inputRef} />
    <button onClick={handleSubmit}>Enviar</button>
  </>;
}