Qual é a diferença entre input controlado e não controlado e quando usar cada um?

Entrada controlada — é um elemento de formulário cujo valor é totalmente controlado pelo estado do componente (por exemplo, no React). O valor do campo é armazenado no estado e atualizado através de um manipulador de eventos.

Entrada não controlada — é um elemento de formulário que é gerido pelo próprio DOM, e não pelo estado do componente. O valor é lido através de referências quando necessário.

Quando usar:

• Entrada controlada é conveniente quando é necessário reagir imediatamente às mudanças, validar dados, sincronizar com o estado da aplicação.
• Entrada não controlada é mais simples e rápida para formulários simples onde não é necessário controle constante da entrada.

Exemplo de entrada controlada em React:

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

Exemplo de entrada não controlada:

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