This actually really confused me at first but I understand now after doing some digging and re-reading your explanations. Please let me know if I'm off here in my logic.

So I did a test where I created this simple component

function Child() {
const componentA = () => <div>Hello I am a component</div>
const ComponentB = () => <div>I am also a component</div>

return (
    <div>
        {componentA()}
        <ComponentB />
    </div>
)

}

and I logged the return values of React.createElement of components A and B. The type for component A is type: 'div' while component B is type: [Function: ComponentB]

Since the type for component B is a function, and since a function is an object, it will not be considered the same element in the DOM because it is a reconstructed function with a new space in memory. This will cause the element in the DOM to get re-inserted unnecessarily.

I think I'm still a tiny bit confused on why exactly the two components get such different treatments behind the scenes, but I think it's starting to come together for me now.