Controlled vs Uncontrolled Components in React
Learn the difference between controlled and uncontrolled components in React, when to use each, with code examples and common interview questions.
Expected Interview Answer
A controlled component keeps its form value in React state, so React is the single source of truth; an uncontrolled component lets the DOM hold the value, and you read it with a ref when needed.
In a controlled input you set value={state} and update it in onChange, so every keystroke flows through React and the UI always mirrors state. An uncontrolled input uses defaultValue and a ref, letting the browser manage the value internally until you pull it out, usually on submit. Controlled inputs enable instant validation, conditional disabling, and formatting; uncontrolled inputs are lighter and closer to plain HTML.
- Single source of truth with controlled inputs
- Instant validation and formatting on every keystroke
- Easy to enable/disable or transform input dynamically
- Uncontrolled inputs need less code for simple forms
- Uncontrolled inputs integrate easily with non-React DOM code
AI Mentor Explanation
A controlled input is like a batter following the coach's signal before every single ball — nothing happens without instruction. An uncontrolled input is a batter told the plan at the start, then left to play freely; the coach only checks the scoreboard at the innings break to see what happened.
Step-by-Step Explanation
Step 1
Identify the value owner
Decide whether React state or the DOM will hold the input's current value.
Step 2
Wire a controlled input
Bind value to state and update state inside onChange so React drives the field.
Step 3
Wire an uncontrolled input
Use defaultValue for the initial value and attach a ref to read the value on demand.
Step 4
Read uncontrolled values
On submit, pull the current value from ref.current.value instead of state.
Step 5
Choose per use case
Prefer controlled for validation and dynamic UI; uncontrolled for simple or DOM-heavy forms.
What Interviewer Expects
- Clear definition of both patterns
- Knowing value+onChange vs defaultValue+ref
- Understanding React state as single source of truth
- When to choose one over the other
- Awareness of validation and performance trade-offs
Common Mistakes
- Mixing value and defaultValue on the same input
- Setting value without an onChange handler, making the field read-only
- Reading uncontrolled input from state instead of a ref
- Assuming controlled inputs are always slower
- Forgetting that file inputs are always uncontrolled
Best Answer (HR Friendly)
“A controlled component means React keeps track of what's typed in a form field, so the code always knows the current value. An uncontrolled component lets the browser remember it, and the code only checks the value when it needs it, usually when the form is submitted.”
Code Example
function ControlledForm() {
const [name, setName] = useState('')
return (
<form onSubmit={() => console.log(name)}>
<input
value={name}
onChange={(e) => setName(e.target.value)}
/>
</form>
)
}function UncontrolledForm() {
const inputRef = useRef(null)
const handleSubmit = (e) => {
e.preventDefault()
console.log(inputRef.current.value)
}
return (
<form onSubmit={handleSubmit}>
<input defaultValue="" ref={inputRef} />
</form>
)
}Follow-up Questions
- Why does a controlled input become read-only if you omit onChange?
- How do you handle file inputs in React?
- When would you deliberately choose an uncontrolled component?
- How do controlled components help with form validation?
- Can you mix controlled and uncontrolled fields in one form?
MCQ Practice
1. In a controlled component, where does the input value live?
A controlled component stores its value in React state and updates it via onChange, making React the single source of truth.
2. Which attribute is used to set the initial value of an uncontrolled input?
Uncontrolled inputs use defaultValue for the initial value and let the DOM manage subsequent changes.
3. What happens if you set value without an onChange handler?
Setting value with no onChange freezes the field, since React never updates the bound state and re-renders the same value.
Flash Cards
What defines a controlled component? — Its value is bound to React state via value and updated through onChange.
What defines an uncontrolled component? — The DOM holds the value; you read it with a ref, using defaultValue for the initial value.
How do you read an uncontrolled input? — Access ref.current.value, typically inside the submit handler.
Why can file inputs only be uncontrolled? — For security, JavaScript cannot set a file input's value, so React cannot control it.