A signup form uses a small labeled input component to collect a name. Typing in the field should update the greeting below it.
Click into the name field and type - focus disappears after every single character. Each keystroke requires clicking back into the field. It is impossible to type a full word.
React uses more than just the component's name to decide whether to update or replace it.
React uses more than just the component's name to decide whether to update or replace it.
Why this fixes it
Defining NameField inside SignupForm's function body means a new function is created on every render. React identifies component types by reference - when the reference changes between renders, React treats the old and new as different component types entirely, unmounts the old one including its DOM node and focus state, and mounts a fresh one. Moving NameField to module scope gives it a single stable reference that never changes. React now sees the same type on every render, updates the existing component in place, and focus is never lost.