Two ways to own a value
A form input has a value. The question is who owns it.
- Controlled: React state holds the value. The input reads value from state and updates state on every change. The DOM only mirrors React.
- Uncontrolled: the DOM holds the value internally. You read it when needed through a ref, often only on submit.
Trade offs
Controlled inputs give you a single source of truth, enabling live validation, formatting, and conditional disabling. The cost is a render on every keystroke and required wiring.
Uncontrolled inputs are simpler and closer to plain HTML. They suit large forms, file inputs, and integration with non React code, but live behavior is harder.
- Use defaultValue for an uncontrolled initial value.
- Use value plus an onChange handler for controlled.
- Mixing both for one input causes warnings and bugs.
Choose controlled when you need to react to every change, uncontrolled when you just need the final value.
Key idea
Controlled inputs store the value in state for live control, while uncontrolled inputs leave it in the DOM and read it via a ref.