How react render when both child components are same and parent component differs on condition

Question

I am wondering about How react will render the component when on of the child component are same across different parent ?

Lets says

render(){
  someFlag ? <div><MyComponent {...someprops} /></div> : <span><MyComponent {...someprops} /></span>
}

What i think is react many take a reference of MyComponent and serve the same reference with different props as it would be more efficient rather that creating new instance of the component, please guide me how react will render those changes should it create new instance as the parent component is different or my thinking is correct ?, still i am relatively new to react

Answer 1

This will lead to a performance issue. As the parent element has changed from div to span on condition change or vice-versa, React will reconstruct the underlying component i.e MyComponent.

You can read more here.