For a simple contact form, would you use controlled or uncontrolled inputs?
For a few fields that are only read on submit, uncontrolled inputs with FormData are enough and re-render less. Use controlled inputs when you need live validation, dependent fields, formatting as the user types or to disable the button.
Explain it simply
Controlled inputs make React the owner of the text, with one render for each key press. Uncontrolled inputs leave the text in the DOM, and you read it when needed.
For a plain contact form that you read once on submit, new FormData(e.currentTarget) gives all values with no state and no re-render per key press. In React 19, a form action receives that FormData directly.
Controlled wins when the UI reacts to the value while typing: live character counter, password strength, formatting a phone number, enabling the button only when valid, or copying one field into another.
Example
function Contact() {
function onSubmit(e) {
e.preventDefault();
const data = Object.fromEntries(new FormData(e.currentTarget));
console.log(data); // { name: "...", message: "..." }
}
return (
<form onSubmit={onSubmit}>
<input name="name" defaultValue="" />
<textarea name="message" />
<button>Send</button>
</form>
);
}What to say in the interview
"For simple forms read on submit I prefer uncontrolled inputs with FormData, fewer renders and less code. I switch to controlled inputs when the interface has to react to each change, such as live validation, formatting or conditional fields."
Common mistakes
- Making every input controlled out of habit, adding renders without a benefit.