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 unmounts the old component and mounts a fresh one, destroying DOM focus. Moving `NameField` to module scope gives it a stable permanent reference. React now sees the same type on every render, updates in place, and focus is never lost.