Ben Aston Ben Aston - 2 years ago 96
React JSX Question

ReactJS reconciliation when a parent DOM node changes type

A component renders the following React element tree.

<div>
<Counter />
</div>


A state or props change then occurs and render is triggered, resulting in the following React element tree.

<span>
<Counter />
</span>


Will the instance of the
Counter
component be completely re-instantiated, constructor and all?

If so, does this same behaviour apply to non-root nodes e.g.:

<div>
<div>
<Counter />
</div>
</div>


transitioning to...

<div>
<span>
<Counter />
</span>
</div>

Answer Source

Yes, it will re-instantiated Couter component on

<div>
  <Counter />
</div>

to

<span>
  <Counter />
</span>

The process specified in Reconciliation says:

This will destroy the old Counter and remount a new one.

For second example it will compare <div> first, there is no change but the next is same scenario as above so it will also remount the Counter component.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download