How Do Controlled Forms Work in React?
Learn how controlled forms work in React using value and onChange, why state is the source of truth, plus code, benefits and interview-ready answers.
Expected Interview Answer
A controlled form is one where every input's value is driven by React state, and an onChange handler updates that state on each keystroke, making React the single source of truth for the form data.
Instead of letting the DOM hold the input value internally, you bind the input's value prop to a state variable and pass an onChange callback that calls setState with the new value. Because the rendered value always mirrors state, you can validate, transform, disable submission, or reset the form declaratively. Uncontrolled inputs, by contrast, keep their value in the DOM and are read via refs only when needed.
- Single source of truth for form data
- Instant validation and formatting on every change
- Easy to conditionally enable or disable the submit button
- Simple to reset or pre-fill fields from state
- Predictable, testable, declarative behavior
AI Mentor Explanation
A controlled input is like the official scoreboard operator who owns the one true score: umpires signal a run (the keystroke), the operator updates the master tally (state), and the big screen only ever shows what the operator has recorded, never its own guess.
Step-by-Step Explanation
Step 1
Create state
Declare a state variable with useState for each field you want to control, seeded with an initial value.
Step 2
Bind the value
Set the input's value prop to the state variable so React renders the current value.
Step 3
Handle onChange
Attach an onChange handler that reads event.target.value and calls the state setter.
Step 4
Use the state
Validate, format, or conditionally disable the submit button using the live state value.
Step 5
Submit and reset
On submit, read directly from state, then reset by setting the state back to its initial value.
What Interviewer Expects
- Clear definition of controlled vs uncontrolled inputs
- Knowing value + onChange makes state the source of truth
- Ability to write a working controlled input
- Awareness of when uncontrolled inputs or refs are appropriate
- Understanding of validation and reset in controlled forms
Common Mistakes
- Setting value without an onChange, making the field read-only
- Mutating state directly instead of using the setter
- Passing undefined to value, causing a controlled-to-uncontrolled warning
- Creating a new handler that ignores event.target.value
- Confusing controlled inputs with uncontrolled ref-based inputs
Best Answer (HR Friendly)
“A controlled form lets React keep the current value of each input in its own memory instead of leaving it in the browser. Every time the user types, React updates that stored value and shows it back, so the app always knows exactly what is in the form.”
Code Example
import { useState } from 'react'
function SignupForm() {
const [email, setEmail] = useState('')
function handleSubmit(e) {
e.preventDefault()
console.log('Submitting:', email)
}
return (
<form onSubmit={handleSubmit}>
<input
type="email"
value={email}
onChange={(e) => setEmail(e.target.value)}
/>
<button type="submit" disabled={!email.includes('@')}>
Sign up
</button>
</form>
)
}Follow-up Questions
- What is the difference between a controlled and an uncontrolled component?
- How do you handle multiple inputs with a single change handler?
- What causes the 'changing an uncontrolled input to controlled' warning?
- When would you deliberately choose an uncontrolled input?
- How do controlled inputs affect performance on large forms?
MCQ Practice
1. What makes an input 'controlled' in React?
A controlled input binds its value to state and updates that state through an onChange handler, so React is the source of truth.
2. What warning appears if you pass value without onChange?
React warns that a field with value but no onChange is read-only; you must supply onChange (or use defaultValue for uncontrolled).
3. Which prop makes an input uncontrolled instead?
defaultValue sets only the initial value and lets the DOM own it afterward, which is the hallmark of an uncontrolled input.
Flash Cards
What is a controlled input? — An input whose value is bound to React state and updated through an onChange handler.
What are the two required props for a controlled text input? — value (from state) and onChange (updates state).
What prop makes an input uncontrolled? — defaultValue — it seeds the initial value but lets the DOM manage it afterward.
How do you read an uncontrolled input's value? — With a ref (useRef) at the moment you need it, e.g. on submit.