Explique componentes controlados versus não controlados, e como você escolhe entre eles para um formulário.

Em um componente controlado o estado do React é a fonte da verdade: o input lê o valor do estado e cada tecla passa pelo onChange. Em um componente não controlado o DOM guarda o valor e você o lê com uma ref ou a partir dos dados do formulário no submit. Controlado te dá validação ao vivo e UI derivada; não controlado significa muito menos renders e menos código em formulários grandes.

Controlado quer dizer que o React é dono do valor: value vem do estado, onChange escreve de volta, e o input não muda sem um render. Não controlado quer dizer que o DOM é o dono e eu só leio quando preciso, seja por uma ref ou pelos dados enviados do formulário. Meu padrão em formulários pequenos é controlado, porque normalmente eu quero validação enquanto o usuário digita ou um campo que depende de outro. Quando o formulário passa de uns quinze ou vinte inputs, ou quando eu tenho um campo que dispara um re-render caro a cada tecla, eu viro para não controlado e valido no blur e no submit. É isso que as bibliotecas de formulário populares fazem por baixo dos panos, elas registram os inputs e assinam de forma estreita em vez de re-renderizar o formulário inteiro. Com as form actions do React 19 eu puxo ainda mais para o não controlado, porque a action recebe o FormData de graça, então num formulário simples de criar ou editar eu consigo pular o estado por completo e só tratar os estados de pendente e de erro com o useActionState.