What is the difference between controlled and uncontrolled components?

Question

Accepted Answer

Two ways to manage form input values in React. Controlled components — the input value lives in React state; every keystroke updates state via onChange , and the input reads from value . React is the single source of truth. Uncontrolled components — the input keeps its value in the DOM; React reads it on demand via a ref (e.g. on submit). Closer to plain HTML. Controlled wins for — live validation, conditional UI based on input, derived values, controlled formatting. Uncontrolled wins for — simple forms, file inputs, integration with non-React code, or when re-renders on every keystroke would hurt. Form libraries — React Hook Form uses uncontrolled internally for performance; Formik is controlled. defaultValue vs value — defaultValue is the uncontrolled initial value; value makes it controlled. Know the practical difference: controlled = value + onChange (React state), uncontrolled = ref + defaultValue (DOM state). The real-time validation example makes the controlled advantage concrete.