128
controlled input
React state owns the value, or the DOM does. Mixing them makes the cursor jump and the submit lie.
What is controlled input?
A controlled input’s value comes from state on every render. An uncontrolled input keeps the value in the DOM until you read it. Switching a component from one to the other, or setting `value` without `onChange`, freezes the field.
Why does controlled input matter when vibe coding?
Models set `value={state}` and also `defaultValue`, or they forget `onChange`. The field looks disabled. Name which owner you want and stick to it.
How do you do controlled input?
Forms that validate as you type are controlled. Simple native submits can be uncontrolled. Do not do both on one node. Reset by changing a key or clearing state, not by fighting the DOM.
How do you ask a model for controlled input?
Make (field) a controlled input: value from state, onChange updates state. Do not also set defaultValue. Do not set value without onChange.
What goes wrong with controlled input?
Controlling a field from a server round-trip on every key. The cursor jumps and you invented a race. Local state, submit later.