<p dir="auto"><a href="https://github.com/facebook/react/blob/master/src/browser/ui/ReactMount.js#L81">https://github.com/facebook/react/blob/master/src/browser/ui/ReactMount.js#L81</a></p>
<p dir="auto">It seems this is mainly the cause of invalid nesting of tags, <code class="notranslate">&lt;a&gt;&lt;div /&gt;&lt;/a&gt;</code>, <code class="notranslate">&lt;table&gt;&lt;tr&gt;&lt;/tr&gt;&lt;/table&gt;</code>, etc. I know there are some issues/PRs regarding this already but AFAIK they're trying to solve/detect it, it seems reasonable to just improve this (very non-informative) error message in the meantime.</p>
<p dir="auto">PS. I've probably seen 2-3 people get bitten by it myself now that I think about it.</p>
<p dir="auto">React version: 18.0.0</p>
<h2 dir="auto">Steps To Reproduce</h2>
<p dir="auto"><code class="notranslate">componentWillUnmount</code> is called twice upon toggling the rendered component. Even when <strong>StrictMode</strong> is disabled</p>
<p dir="auto">Link to code example: <a href="https://codesandbox.io/s/componentwillunmount-called-twice-hrpzy5?file=/src/App.js" rel="nofollow">https://codesandbox.io/s/componentwillunmount-called-twice-hrpzy5?file=/src/App.js</a></p>
<h2 dir="auto">The current behavior</h2>
<p dir="auto">After upgrading to react 18 we've seen some different behavior in a conditionally rendered, lazy class component.</p>
<p dir="auto">In the provided code example the class component is rendered first. After the first toggle, the class component's componentWillUnmount is called twice.</p>
<p dir="auto">Subsequent toggle calls correctly lead to a single componentWillUnmount invocation.</p>
<p dir="auto">This does only seem to affect the class component when its rendered first. If the condition is changed to initially show the other function component the class component unmounts just fine</p>
<h2 dir="auto">The expected behavior</h2>
<p dir="auto">The class component's componentWillUnmount is only called once</p>