What is the difference between controlled and uncontrolled components in React?
Quick answer
A controlled component keeps the input's value in React state and updates it through onChange, while an uncontrolled component lets the DOM hold the value and you read it with a ref when needed.
Controlled inputs make React the single source of truth: the value comes from state and every keystroke calls a handler that updates state. This makes validation, formatting and conditional disabling easy. The cost is a re-render on each keystroke.
Uncontrolled inputs use defaultValue and ref, so the browser manages the value and you read it on submit. They are simpler for basic forms and file inputs (which are always uncontrolled). Form libraries often use uncontrolled inputs under the hood to avoid re-rendering the whole form while typing.
// controlled
const [email, setEmail] = useState("");
<input value={email} onChange={e => setEmail(e.target.value)} />
// uncontrolled
const ref = useRef(null);
<input defaultValue="" ref={ref} />
const onSubmit = () => console.log(ref.current.value);