Controlled vs Uncontrolled Components
A staple React forms question. The difference is simply where the input's value is stored — in React state, or in the DOM.
The difference
A controlled input derives its value from state and updates state on every keystroke, so React is the single source of truth — ideal for validation and conditional logic. An uncontrolled input keeps its value in the DOM and you read it with a ref only when you need it — less code for simple forms.
// controlled
<input value={name} onChange={e => setName(e.target.value)} />
// uncontrolled
<input ref={ref} defaultValue="" /> // read ref.current.valueWhich to use
Prefer controlled by default — predictable and easy to validate. Use uncontrolled (or a library like React Hook Form) for large or performance-sensitive forms where re-rendering on every keystroke is wasteful.
Build forms interviewers love
Controlled inputs, validation, multi-step forms and the common bugs — coded step by step in the React Coding Handbook.
⚡ Get the React Interview Kit → ₹399Frequently asked questions
- When are uncontrolled inputs better?
- For simple forms or performance-sensitive ones where you don't need the value on every keystroke — you read it once on submit via a ref.
- What makes an input controlled?
- Setting its value prop from state and updating that state in onChange. If you use defaultValue instead, it's uncontrolled.