What is the difference between controlled and uncontrolled components in React?

Two ways to wire form inputs in React.

Controlled.

const [email, setEmail] = useState("");
<input value={email} onChange={e => setEmail(e.target.value)} />

The input's displayed value comes from React state. Every keystroke flows: keypress → onChange → setState → re-render → value prop → DOM. React is the source of truth.

Uncontrolled.

const ref = useRef<HTMLInputElement>(null);
<input ref={ref} defaultValue="" />
// later: const value = ref.current.value;

The DOM owns the value. React reads it when needed (typically on submit). defaultValue sets the initial value; React then leaves the input alone.

When to use which.

The performance argument.

Controlled inputs re-render on every keystroke. For one input, irrelevant. For a 100-field form, every keystroke re-renders the whole form unless you localize state. That's why react-hook-form and similar libraries are popular — they use uncontrolled inputs under the hood with refs, give you a controlled-feeling API, and avoid the re-render cascade.

Don't mix on the same input.

// Warning: switching from uncontrolled to controlled
<input value={maybeUndef} onChange={...} />

Going from value={undefined} to value="foo" flips the input's controlled-ness mid-life and React warns. Either provide a default (value={maybeUndef ?? ""}) or stay uncontrolled.

Defaults to remember.

• <input>/<textarea>: value (controlled) vs defaultValue (uncontrolled, initial).
• <input type="checkbox"> / type="radio": checked vs defaultChecked.
• <select>: value on <select> (React adapts it to set selected on the right <option>).
• <input type="file">: always uncontrolled — no value prop; read files via ref or onChange.

Hybrid pattern: react-hook-form.

const { register, handleSubmit, formState: { errors } } = useForm();
<input {...register("email", { required: true })} />

Inputs are uncontrolled, react-hook-form subscribes to changes via DOM events, and exposes a hook API. No re-renders per keystroke; validation runs without re-rendering the parent. Default choice in 2026 for non-trivial forms.

The senior framing. The interview answer isn't "controlled is better." It's: controlled when you need to react to each keystroke, uncontrolled when you don't, and use a form library for anything serious because both modes have ergonomic and performance limits at scale.