Controlled vs Uncontrolled Inputs

The plain-language idea

A controlled input's value is driven entirely by React state — the DOM element never has a mind of its own:

function ControlledInput() {
  const [value, setValue] = useState("");
  return <input value={value} onChange={(e) => setValue(e.target.value)} />;
}

Every keystroke fires onChange, which updates state, which re-renders the input with the new value — React is the single source of truth, and the DOM just reflects it.

An uncontrolled input lets the DOM manage its own value; React only reaches in when it needs to, via a ref:

function UncontrolledInput() {
  const inputRef = useRef(null);
  function handleSubmit() {
    console.log(inputRef.current.value); // read only when needed
  }
  return <input ref={inputRef} defaultValue="" />;
}

<input value={value} onChange={...} /> — React state IS the source of truth for what's on screen.

BackNext

Picking one

| | Controlled | Uncontrolled | |---|---|---| | Source of truth | React state | The DOM | | Validate/format as you type | Easy — you see every keystroke | Harder — need to read the DOM | | Performance on huge forms | A re-render per keystroke | No re-render per keystroke | | Simple "read on submit" forms | Overkill | A natural fit |

What people usually miss

Watch out

• You can start uncontrolled and switch to controlled (or vice versa) accidentally. If value flips between undefined and a real string across renders (e.g., from state.value before data loads), React logs a warning about switching between controlled and uncontrolled — pick one mode and stay in it, using value ?? "" if needed.
• Controlled doesn't mean slower in any way that matters in practice. A re-render per keystroke sounds expensive but is exactly the kind of update React is built to handle well; reach for uncontrolled for a specific reason (huge forms, third-party widgets), not by default "for performance."
• Uncontrolled is the natural fit for integrating non-React widgets (a third-party date picker, a <canvas>-based editor) that already manage their own internal state — fighting them into fully controlled inputs is often more trouble than it's worth.

Why this matters in interviews

"Build a form" exercises almost always reveal whether a candidate defaults to controlled inputs out of habit or genuinely understands the tradeoff — and the controlled/uncontrolled switching warning is a real bug interviewers like to plant deliberately.