Controlled inputs and focus

Controlled inputs and focusthe detail interviewers poke at

A controlled input drives its value from state and updates on every keystroke. An uncontrolled input owns its own value and you read it through a ref. For a polished editor UI you almost always want controlled, but you must handle the focus and caret yourself.

• Controlled: value + onChange - predictable, validatable, but you can fight the caret if you reformat the value mid-type.
• Uncontrolled: defaultValue + ref - simpler, but the value lives in the DOM, so React state and the field can drift.
• Focus management: move focus deliberately on mount, on open and on error - a popover that steals or drops focus reads as broken to keyboard users.