Interview · Forms
Controlled vs Uncontrolled
Who holds the input's truth?
A controlled component delegates the input value to React — state is the source of truth. An uncontrolled component lets the DOM hold the value and reads it with a ref when needed.
Controlled
value comes from state and onChange updates it. React controls every keystroke. Ideal when you need real-time validation, transform the input as the user types, or synchronize multiple fields.
Uncontrolled
The DOM holds the value. You read it with useRef at the moment you need it (for example, on submit). Simpler for forms where the intermediate value doesn't matter — like a file upload.
Common pitfalls
- 01Mixing controlled and uncontrolled in the same input (value + no onChange, or defaultValue + value) generates React warnings and unpredictable behavior.
- 02For uncontrolled inputs, read the ref only in handlers (onSubmit) — not during render.
- 03Controlled inputs with expensive validation on every keystroke can make the input feel sluggish — consider debouncing.
Was this helpful?
Sign in to give feedback