Fundamentalsbeginner
Controlled vs Uncontrolled Components
Understand the difference between form elements driven by React state versus those managed by the DOM itself.
A controlled component has its value driven entirely by React state: the input's value prop is set from state, and an onChange handler updates that state on every keystroke, making React the single source of truth. An uncontrolled component lets the DOM manage its own internal state, and React reads the current value only when needed, typically via a ref.
A controlled input is like dictating a letter to a scribe who writes exactly what you say and shows you the draft after every word; an uncontrolled input is like handing someone a notepad to fill out themselves — you only look at it when they're done.
Key Concepts
1
Controlled components give you fine-grained control — you can validate, transform, or restrict input as the user types, and the displayed value always reflects application state. This is the default recommended approach for most forms because it keeps UI and data in sync predictably.
2
Uncontrolled components are simpler for basic cases and integrate more naturally with non-React code or file inputs (which can't be controlled since browsers won't let JavaScript set a file input's value for security reasons). They can also be marginally more performant for very large forms since they avoid a re-render on every keystroke.
3
Interviewers like asking candidates to name concrete cases where an uncontrolled component is unavoidable — file inputs being the classic answer — and to explain the tradeoff between controlled forms' predictability and uncontrolled forms' reduced re-render overhead.