What is the difference between controlled and uncontrolled inputs?

Question

Accepted Answer

It comes down to **who is the source of truth for the input's value** — React state, or the DOM itself. ## Controlled (React owns the value) The input's `value` is driven by state, and `onChange` keeps state in sync. The DOM always reflects React: ```jsx const [name, setName] = useState(""); setName(e.target.value)} // every keystroke updates state /> ``` Because state is the source of truth, you can validate, format, or transform on every keystroke (e.g. force uppercase, limit length, disable a submit button). ## Uncontrolled (the DOM owns the value) The browser keeps the value; you read it only when needed via a ref: ```jsx const inputRef = useRef(null); ; // on submit: const value = inputRef.current.value; ``` ## When to use which - **Controlled**: most forms — you get validation, conditional UI, and a single source of truth. The downside is a re-render per keystroke (usually negligible). - **Uncontrolled**: simple forms, file inputs (`` is always uncontrolled), or integrating non-React widgets. Less code, but you can't react to changes as they happen. Mixing them (passing both `value` and `defaultValue`) is a common mistake and triggers a React warning.