What is the difference between controlled and uncontrolled components?

The distinction is who owns the input value. Controlled inputs make React the source of truth, which is useful for validation, formatting and conditional UI. Uncontrolled inputs are closer to plain HTML and can be simpler for large forms.

function Controlled() {
  const [name, setName] = useState("");

  return (
    <input
      value={name}
      onChange={(event) => setName(event.target.value)}
    />
  );
}

function Uncontrolled() {
  const inputRef = useRef(null);

  return <input ref={inputRef} defaultValue="Asha" />;
}

Trade-offs

• Controlled: predictable value, easy validation and formatting, more re-renders
• Uncontrolled: less code for simple forms, value lives in the DOM, read on submit
• defaultValue sets the initial value for an uncontrolled input
• React 19 form actions can read submitted values with FormData

Do not mix value and defaultValue on the same input. Choose one ownership model. If you need a controlled input, always provide onChange or the field becomes read-only.