What is the difference between controlled and uncontrolled components?
Two ways to manage form input values in React.
Controlled components — the input value lives in React state; every keystroke updates state via
onChange, and the input reads fromvalue. React is the single source of truth.
Uncontrolled components — the input keeps its value in the DOM; React reads it on demand via a
ref(e.g. on submit). Closer to plain HTML.
Controlled wins for — live validation, conditional UI based on input, derived values, controlled formatting.
Uncontrolled wins for — simple forms, file inputs, integration with non-React code, or when re-renders on every keystroke would hurt.
Form libraries — React Hook Form uses uncontrolled internally for performance; Formik is controlled.
defaultValue vs value —
defaultValueis the uncontrolled initial value;valuemakes it controlled.
// Controlled component
function ControlledForm() {
const [email, setEmail] = useState('');
const [error, setError] = useState('');
const handleChange = (e) => {
const value = e.target.value;
setEmail(value);
setError(value.includes('@') ? '' : 'Invalid email');
};
return (
<form>
<input value={email} onChange={handleChange} />
{error && <span className="error">{error}</span>}
</form>
);
}
// Uncontrolled component
function UncontrolledForm() {
const inputRef = useRef();
const handleSubmit = (e) => {
e.preventDefault();
console.log('Value:', inputRef.current.value);
};
return (
<form onSubmit={handleSubmit}>
<input ref={inputRef} defaultValue="" />
<button type="submit">Submit</button>
</form>
);
}The controlled component uses value and onChange — React state is the source of truth, enabling real-time validation on every keystroke. The uncontrolled component uses ref and defaultValue — the DOM manages the input state, and we only read it on submit.
Note: controlled uses 'value', uncontrolled uses 'defaultValue'.
Know the practical difference: controlled = value + onChange (React state), uncontrolled = ref + defaultValue (DOM state). The real-time validation example makes the controlled advantage concrete.