Component is re-renedered when DOM changes around it

[r1chm8]

Version

2.6.10

Reproduction link

https://codepen.io/Richm8/pen/VoWZQZ

Steps to reproduce

In the attached codepen, Open console and then click on the toggle button, you'll see that the created and destroyed hooks are called for the logger component even though the component is not having any manipulations performed on it.

What is expected?

The created and destroy hooks on logger not to be called

What is actually happening?

The created and destroy hooks on logger are being called

[posva]

Looks like a duplicate of #4362, here the divs are replaced, triggering the children destruction creation

I'm leaving this open for the moment because I'm not sure it's a duplicate, as a workaround, you must key the div container the logger

[r1chm8]

Thank you for the workaround, I tired searching before making the issue but it’s hard to know what to search for

[posva]

yeah, it's not an easy one to find

[staghouse]

Could someone explain a bit more in depth how the workaround is applied? My issue relates to #9473 but some clarity would be greatly appreciated.

[r1chm8]

From my codepen example, it was as simple as adding a key on the div which wrapped the element being incorrectly rendered.

<div class="my-4">
    <logger />
</div>

became:

<div key="logger" class="my-4">
    <logger />
</div>

[staghouse]

I see, thank you. Unfortunately that is not working on my end for components with iframes or an iframe nested but it could be for other reasons as I am working in Nuxt.