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

Think of filling an exam form at the college office. In one office, a clerk checks every line as you write it and tells you immediately if your roll number has the wrong format. In another office, you fill the whole form yourself and the clerk reads it only when you submit.

A controlled input is the first office. React state is the single source of truth. The input shows whatever is in state, and every keystroke calls a handler that updates state. Because you see every change, you can validate, format or block input as the user types.

An uncontrolled input is the second office. The browser keeps the value inside the DOM element, as it normally does in plain HTML. React does not track each keystroke. You read the value when you need it, usually on submit.

// Controlled: React state owns the value
function PhoneInput() {
  const [phone, setPhone] = useState("");
  return (
    <input
      value={phone}
      onChange={(e) => setPhone(e.target.value.replace(/\D/g, "").slice(0, 10))}
      placeholder="10-digit mobile number"
    />
  );
}

// Uncontrolled: the DOM owns the value, read it on submit
function FeedbackForm() {
  function handleSubmit(e) {
    e.preventDefault();
    const data = new FormData(e.currentTarget);
    console.log(data.get("feedback"));
  }
  return (
    <form onSubmit={handleSubmit}>
      <textarea name="feedback" defaultValue="" />
      <button type="submit">Send</button>
    </form>
  );
}

The phone input strips non-digits and limits length as you type, which needs a controlled input. The feedback form only needs the value at the end, so uncontrolled is simpler.

• A controlled input uses value (or checked for checkboxes) plus onChange. If you set value without onChange, the input becomes read-only and React warns you.
• An uncontrolled input uses defaultValue (or defaultChecked) to set only the starting value. After that, the DOM manages it. You read it with a ref (useRef) or from FormData.
• In React 19, a <form> can take a function as its action. React calls it with the form's FormData on submit, which makes uncontrolled forms convenient for simple cases.

• Controlled: live validation, input masks for phone or PAN-style codes, enabling the submit button only when fields are valid, search boxes that filter as you type.
• Uncontrolled: simple contact or feedback forms, file inputs (<input type="file"> is always uncontrolled because its value cannot be set by code), and integrating non-React widgets.
• Form libraries often use uncontrolled inputs with refs internally to avoid re-rendering on every keystroke in very large forms.

• Switching between controlled and uncontrolled, for example starting with value={undefined} and later passing a string. React warns about this. Initialise state with "" instead of undefined.
• Using both value and defaultValue on the same input.
• Setting value but forgetting onChange, so the user cannot type.
• Assuming controlled is always better. It re-renders on every keystroke, which is usually fine but unnecessary for simple forms.

• Why is a file input always uncontrolled?
• What warning do you get when an input switches from uncontrolled to controlled, and why?
• How do form actions in React 19 change the way you handle simple forms?