What's the difference between controlled and uncontrolled components?
Take a moment.
Say your answer out loud or write it down first — retrieval is what makes it stick. Reveal when you're ready.
Short answer
In controlled components, form inputs get value from state and onChange writes back to it — React is the single source of truth. Uncontrolled inputs keep their own internal state, read via refs when needed.
Detailed explanation
Controlled inputs bind value={state} and update state on every keystroke, making the UI fully driven by React state: instant validation, conditional disabling, formatted input (masks), and easy resets all fall out naturally because the value can't drift from state. Uncontrolled inputs behave like vanilla HTML: the DOM holds the current value and you pull it on demand with ref.current.value — less code for simple forms, but no per-keystroke control. Rule of thumb: default to controlled for anything interactive or validated; use uncontrolled for simple one-shot reads (file inputs must be uncontrolled anyway since their value is read-only). Libraries like react-hook-form embrace uncontrolled internals precisely to skip per-keystroke re-renders while still giving validation.
Official docs:React docs: <input>
Example
// Controlled
const [email, setEmail] = useState('');
<input value={email} onChange={e => setEmail(e.target.value)} />
// Uncontrolled
const emailRef = useRef<HTMLInputElement>(null);
<input defaultValue="" ref={emailRef} />
onSubmit={() => console.log(emailRef.current!.value)}Interview tip
Frame both around 'who owns the truth' — React state vs the DOM — then mention file inputs as the classic forced-uncontrolled case.
Common mistakes
- Forgetting onChange on a controlled input (value locks it read-only).
- Not knowing file inputs can't be controlled.