Qual é a diferença entre inputs controlados e não controlados?

Question

Accepted Answer

Tudo se resume a **quem é a fonte de verdade para o valor do input** — o state do React ou o próprio DOM. ## Inputs controlados (React controla o valor) O `value` do input é controlado pelo state, e `onChange` mantém o state sincronizado. O DOM sempre reflete o React: ```jsx const [name, setName] = useState(""); setName(e.target.value)} // every keystroke updates state /> ``` Como o state é a fonte de verdade, você pode validar, formatar ou transformar a cada keystroke (por exemplo, forçar maiúsculas, limitar comprimento, desabilitar um botão de envio). ## Inputs não controlados (o DOM controla o valor) O navegador mantém o valor; você o lê apenas quando necessário via uma ref: ```jsx const inputRef = useRef(null); ; // on submit: const value = inputRef.current.value; ``` ## Quando usar cada um - **Controlados**: a maioria dos formulários — você obtém validação, UI condicional e uma única fonte de verdade. A desvantagem é uma re-renderização a cada keystroke (geralmente negligenciável). - **Não controlados**: formulários simples, inputs de arquivo (`` sempre é não controlado) ou integrando widgets não-React. Menos código, mas você não pode reagir às mudanças enquanto acontecem. Misturar os dois (passando tanto `value` quanto `defaultValue`) é um erro comum e dispara um aviso do React.