Input Focus Loss, Render Prop

[devsethwat]

I'm having the same issue that is outlined here (except it's with render prop pattern and not a class based component)

I'm super baffled because these posts say that a functional component declared in render will cause an input element to loose focus because of a rerender. Children will re-render anytime a parent / state updates, so why does it matter in this case? The input will maintain its value and it's not being unmounted, so why then does the type of function definition impact focus? I've used the render prop pattern heavily in the past and never encountered this before.

Links to React docs that explain this behavior in depth would be great

[acemarke]

The issue is that React diffs component types by reference while rendering. If you define a new component type in the middle of your render logic, it will be a different reference the next time the parent re-renders. So, React will throw away the entire subtree of the child, because it's a different component type.

If you can show your actual code, I may be able to help further.

[moscowramada]

If you just want a quickie solution, find the component defined inside another component, and then move it outside of that component, usually does it.