What are controlled vs uncontrolled components?
Quick answer
Controlled inputs derive their value from state (single source of truth); uncontrolled inputs keep their value in the DOM and you read it via a ref.
In detail
A controlled input sets value={state} and updates state on every onChange, so React always knows the value — ideal for validation and conditional logic. An uncontrolled input uses defaultValue and a ref to read the value on demand — less code for simple forms. Prefer controlled by default; use uncontrolled or a form library for large/perf-sensitive forms.
// controlled
<input value={name} onChange={e => setName(e.target.value)} />
// uncontrolled
<input ref={ref} defaultValue="" /> // read ref.current.valueWhy interviewers ask this: A staple forms question on every front-end interview.
Common follow-up questions
- →When would you choose uncontrolled inputs?
This is 1 of 118+ questions in the React Interview Kit
Get every question with detailed answers, follow-ups and real code — plus coding challenges and a last-minute revision sheet. One-time payment, instant access.
⚡ Get the React Interview Kit → ₹399