What is the difference between a controlled and an uncontrolled input, and when do you choose each?
Who owns the form value — React state or the DOM — and the trade-offs.
A controlled input is driven by React state: its value comes from state and every keystroke fires onChange to update that state, so React is the single source of truth. This makes validation, formatting, conditional disabling, and derived UI trivial because you always have the current value in render. An uncontrolled input lets the DOM keep its own value; you read it on demand via a ref (or from the submit event / FormData), using defaultValue for the initial value. Uncontrolled is lighter — no re-render per keystroke — and is the natural fit for file inputs (which are always uncontrolled) and for integrating non-React widgets. Choose controlled when you need live validation, cross-field logic, or to reflect the value elsewhere as the user types; choose uncontrolled for simple submit-only forms or performance-sensitive large forms. The cardinal bug is setting value without onChange (or vice versa), which makes the field read-only or drops React's control — pass both, or use defaultValue for uncontrolled.
Controlled for live validation and dependent fields; uncontrolled/refs for submit-only forms, file inputs, and perf.