Who holds the value
In React a form field can be controlled or uncontrolled, depending on whether component state or the DOM is the source of truth.
Controlled inputs
A controlled input gets its value from state and reports changes through an onChange handler. State drives the field, so the value in state and the value on screen always agree.
- Easy to validate, transform, or disable based on input.
- Re renders on every keystroke, which is usually fine.
Uncontrolled inputs
An uncontrolled input lets the DOM keep its own value. You read it when needed, often through a ref.
- Less code for simple forms.
- Useful for file inputs and integrating non React widgets.
Choosing
Reach for controlled inputs when you need live validation or to derive other state from the value. Reach for uncontrolled inputs for simple submit and forget forms.
Key idea
A controlled input keeps its value in React state for live control, while an uncontrolled input leaves the value in the DOM and you read it with a ref when needed.