Controlled vs Uncontrolled Components: What Is the Difference?
Learn the difference between controlled and uncontrolled React form components, tradeoffs, and when to use each.
Expected Interview Answer
A controlled component has its form value driven entirely by React state, with every keystroke updating state via onChange and the state value fed back into the input’s value prop, while an uncontrolled component lets the DOM itself hold the current value, which React reads on demand through a ref instead of tracking it on every change.
With a controlled input, the value prop is always set from a piece of React state, and the onChange handler updates that state on every keystroke, so React re-renders the input with the new value each time — this makes the current value always available in state for real-time validation, conditional formatting, or disabling a submit button before the user finishes typing. With an uncontrolled input, no value prop is set (or it’s set only as defaultValue), and the DOM node manages its own internal value the way a plain HTML form always has; React only reads that value when needed, typically via a ref accessed at submit time. Controlled components give precise, real-time control at the cost of a re-render on every keystroke and more boilerplate, which matters for very large forms with many fields. Uncontrolled components avoid that per-keystroke re-render and require less code for simple cases like a one-off file input or a form you only need to read once on submit, but they make live validation and dynamic UI reactions to typing harder since React does not know the value until it explicitly asks. Most production forms use controlled components by default, reaching for uncontrolled only for performance-sensitive large forms, file inputs (which are always uncontrolled since their value cannot be set programmatically for security reasons), or quick integrations with non-React code.
- Controlled: real-time access to input value for live validation and conditional UI
- Controlled: a single source of truth (React state) that is easy to reason about and test
- Uncontrolled: fewer re-renders per keystroke, useful for very large or performance-sensitive forms
- Uncontrolled: less boilerplate for simple, read-once-at-submit form use cases
AI Mentor Explanation
A controlled component is like a scorer who updates the official scoreboard the instant every single ball is bowled, so the board always reflects the exact live state and anyone can check the current score at any moment. An uncontrolled component is like a scorer who just keeps a private tally on a notepad during play and only transcribes the final total onto the board when the umpire asks for it at the end of the innings. The first approach gives constant real-time visibility at the cost of updating after every ball; the second is simpler and cheaper but the board stays blank until someone explicitly asks for the number.
Step-by-Step Explanation
Step 1
Controlled: state initializes the value
A useState value is passed to the input's value prop, so React fully owns the displayed content from the start.
Step 2
Controlled: onChange updates state on every keystroke
Each keystroke fires onChange, which calls setState, triggering a re-render with the new value fed back into the input.
Step 3
Uncontrolled: the DOM owns the value
No value prop is set (only defaultValue, if any); the browser's native input behavior manages the current value internally.
Step 4
Uncontrolled: a ref reads the value on demand
React accesses the current DOM value only when needed, typically via inputRef.current.value at submit time.
What Interviewer Expects
- Precise distinction: React state as source of truth vs the DOM as source of truth
- Mention of the per-keystroke re-render tradeoff for controlled inputs
- Knowing file inputs are always uncontrolled for security reasons
- A concrete example of when uncontrolled makes sense (large forms, one-off reads)
Common Mistakes
- Saying uncontrolled components “don't use React state at all” without nuance about defaultValue/refs
- Not mentioning why file inputs cannot be controlled
- Claiming controlled is always strictly better without discussing the re-render cost at scale
- Confusing controlled/uncontrolled with server-controlled vs client-controlled rendering, an unrelated concept
Best Answer (HR Friendly)
“In a controlled component, React state holds the current value and updates it on every keystroke, so I always know exactly what the user has typed, which is great for live validation. In an uncontrolled component, the browser’s own input just tracks its value internally and I only read it with a ref when I actually need it, like at form submit, which means less re-rendering but less real-time visibility into what’s being typed.”
Code Example
// Controlled: React state is the single source of truth
function ControlledForm() {
const [email, setEmail] = useState('')
return (
<input
value={email}
onChange={e => setEmail(e.target.value)}
/>
)
}
// Uncontrolled: the DOM owns the value, read via ref on submit
function UncontrolledForm() {
const emailRef = useRef(null)
function handleSubmit(e) {
e.preventDefault()
console.log(emailRef.current.value) // read only on demand
}
return (
<form onSubmit={handleSubmit}>
<input defaultValue="" ref={emailRef} />
<button type="submit">Submit</button>
</form>
)
}Follow-up Questions
- Why must file inputs always be uncontrolled in React?
- How would you validate a field live in an uncontrolled form without adding onChange?
- What performance issue can arise from many controlled inputs re-rendering in a very large form?
- How do form libraries like React Hook Form combine ref-based uncontrolled inputs with validation?
MCQ Practice
1. In a controlled component, what is the single source of truth for the input value?
Controlled components always derive their displayed value from React state via the value prop.
2. How does an uncontrolled component typically expose its current value to React?
Uncontrolled inputs let the DOM manage the value internally; React reads it via a ref when needed.
3. Why are file inputs in React always uncontrolled?
Security restrictions prevent scripts from setting a file input's value, so it can only be read, not controlled.
Flash Cards
What owns the value in a controlled component? — React state, fed back into the input via the value prop.
What owns the value in an uncontrolled component? — The DOM node itself; React reads it on demand via a ref.
Main cost of controlled inputs? — A re-render on every keystroke, which can matter for very large forms.
Why are file inputs always uncontrolled? — Browsers block programmatically setting a file input's value for security.