当两个子组件相同且父组件在条件上不同时如何反应渲染

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 ie MyComponent .

You can read more here .