Controlled vs Uncontrolled
Controlled inputs store their current value in React state; uncontrolled inputs store value directly in the DOM.
Mental Model
"The Steering Wheel: Controlled is drive-by-wire (computer controls steering); uncontrolled is a mechanical linkage directly to tires."
Interactive Engine Simulation
React state is the "single source of truth". Every keystroke updates state.
The DOM holds the value. We use a "ref" to pull it out when needed.
In Controlled components, React is the pilot. In Uncontrolled components, the Browser is the pilot.
Executable Code Snippet
1// CONTROLLED: React state drives the value
2function Controlled() {
3 const [val, setVal] = useState("");
4 return <input value={val} onChange={e => setVal(e.target.value)} />;
5}
6
7// UNCONTROLLED: DOM drives the value
8function Uncontrolled() {
9 const inputRef = useRef(null);
10 const handleSubmit = () => console.log(inputRef.current.value);
11 return <input ref={inputRef} />;
12}- 01.Component re-renders are triggered by state or prop changes.
- 02.Reconciliation algorithm diffs the Virtual DOM to minimize actual DOM updates.
- 03.Automatic batching optimizes multiple state updates into a single render cycle.
01. Who owns the data?
In a **Controlled Component**, React state is the "single source of truth." The input's value always matches the state. In an **Uncontrolled Component**, the DOM (the browser) maintains the value, and we "peek" at it using a Ref only when needed (like on form submission).
Controlled
Easy validation, instant feedback, predictable.
Uncontrolled
Better performance for huge forms, closer to vanilla JS.
02. The Recommendation
React documentation generally recommends **Controlled Components** for 90% of use cases. It makes logic like password strength meters or disabling buttons based on input length trivial to implement. Reserve Uncontrolled logic for integration with non-React libraries or heavy performance-critical UIs.
Architectural Advice
"Think of it as a steering wheel. Controlled is **Fly-by-wire** (software signals the movement). Uncontrolled is a **Mechanical Link** (direct connection to the wheels)."