A name editor shows a text input and a saved name below it. The user can type a new name, blur to save, and click Reset to go back to the default. After editing, the Reset button updates the label but leaves the input field showing the old typed value.
Type "Bob" in the input field, click outside - the saved label shows "Bob". Click Reset - the label correctly reverts to "Alice" but the input field still shows "Bob". The input and the label are out of sync.
How does React know to update an input's displayed value after state changes?
How does React know to update an input's displayed value after state changes?
Why this fixes it
Using defaultValue instead of value makes the input uncontrolled - React sets the initial DOM value once on mount and then steps back, handing ownership of the field to the browser; subsequent state changes have no effect on what the input displays. Replacing defaultValue with value={name} and adding onChange={(e) => setName(e.target.value)} converts the input to controlled, meaning React drives the displayed value from state on every render. When setName('Alice') is called by Reset, React re-renders with name === 'Alice' and the value prop forces the input field to reflect that, keeping the field and the label in sync.