The distinction is about who owns the input's value — React state, or the DOM.

Controlled component

React state is the single source of truth. The input's value is a prop; every change goes through onChange → setState → re-render.

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

• The DOM input can't hold a value React doesn't know about.
• You can transform/validate/format on every keystroke, disable the submit button reactively, sync with other state.

Uncontrolled component

The DOM keeps its own state. React doesn't track each keystroke; you read the value when you need it (usually on submit) via a ref. Initial value via defaultValue (not value).

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

Comparison

When to use which

• Controlled — you need the value during editing: live validation, formatting (currency, phone), conditional UI, dependent fields, controlled clearing.
• Uncontrolled — simple forms where you only need the value on submit; <input type="file"> (always uncontrolled); integrating with non-React code; performance-sensitive large forms.

The performance angle

A controlled useState per field re-renders on every keystroke. For large forms this matters — which is exactly why React Hook Form uses uncontrolled inputs under the hood (refs) to avoid those re-renders while still giving you validation. So in practice: controlled for small/interactive forms, RHF (uncontrolled) for big ones.

Gotcha

Passing value without onChange makes a read-only input and warns. Switching a component between controlled and uncontrolled (value going undefined → defined) also warns — pick one and keep value always defined.