<p dir="auto">React version: 18.2.0</p>
<h2 dir="auto">Steps To Reproduce</h2>
<ol dir="auto">
<li>Create a component that renders <code class="notranslate">children</code> directly or wrapped by a fragment</li>
<li>Programatically or using google in-page translate clear the component<br>
<a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/12008100/214622717-f3d871cd-7cb4-483b-9b6d-e4b7e9e6fdf8.png"><img width="612" alt="image" src="https://user-images.githubusercontent.com/12008100/214622717-f3d871cd-7cb4-483b-9b6d-e4b7e9e6fdf8.png" style="max-width: 100%;"></a></li>
<li>Trigger a re-render that removes the component</li>
<li>Observe error<br>
<a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/12008100/214622966-f547fe7e-e132-4eaa-8b9d-edb08f3063dd.png"><img width="1049" alt="image" src="https://user-images.githubusercontent.com/12008100/214622966-f547fe7e-e132-4eaa-8b9d-edb08f3063dd.png" style="max-width: 100%;"></a><br>
<code class="notranslate">Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.</code></li>
</ol>
<p dir="auto">There is a better title for this bug report I just can't think of it yet <g-emoji class="g-emoji" alias="sweat_smile" fallback-src="https://github.githubassets.com/images/icons/emoji/unicode/1f605.png">😅</g-emoji></p>

<p dir="auto">Link to code example: <a href="https://codesandbox.io/s/determined-antonelli-7swu6w?file=/src/App.js" rel="nofollow">https://codesandbox.io/s/determined-antonelli-7swu6w?file=/src/App.js</a></p>

<h2 dir="auto">The current behavior</h2>
<p dir="auto">The page turns blank because the element to remove could not be found</p>
<h2 dir="auto">The expected behavior</h2>
<p dir="auto">Either ignore the element and try to continue, or re-render the first parent node that <em>does</em> exist</p>
<h2 dir="auto">Coming from search? See workaround here: <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="273303484" data-permission-text="Title is private" data-url="https://github.com/facebook/react/issues/11538" data-hovercard-type="issue" data-hovercard-url="/facebook/react/issues/11538/hovercard?comment_id=417504600&amp;comment_type=issue_comment" href="https://github.com/facebook/react/issues/11538#issuecomment-417504600">#11538 (comment)</a>. And star this issue: <a href="https://bugs.chromium.org/p/chromium/issues/detail?id=872770" rel="nofollow">https://bugs.chromium.org/p/chromium/issues/detail?id=872770</a>.</h2>
<p dir="auto"><strong>Do you want to request a <em>feature</em> or report a <em>bug</em>?</strong></p>
<p dir="auto">Bug, though there's a decent chance it's a Chrome/Google Translate one</p>
<p dir="auto"><strong>What is the current behavior?</strong></p>
<p dir="auto">When using Google Translate on a page using React 16, a certain code pattern produces a Javascript error (<code class="notranslate">Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.</code>) when the rendered content changes.</p>
<p dir="auto"><strong>If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem via <a href="https://jsfiddle.net" rel="nofollow">https://jsfiddle.net</a> or similar (template for React 16: <a href="https://jsfiddle.net/Luktwrdm/" rel="nofollow">https://jsfiddle.net/Luktwrdm/</a>, template for React 15: <a href="https://jsfiddle.net/hmbg7e9w/" rel="nofollow">https://jsfiddle.net/hmbg7e9w/</a>).</strong></p>
<p dir="auto">(This has only been checked on macOS 10.13.1)</p>
<ol dir="auto">
<li>Navigate to <a href="https://qq49kwjynj.codesandbox.io/" rel="nofollow">https://qq49kwjynj.codesandbox.io/</a> in a Chrome browser set to some language other than Japanese.</li>
<li>Right click the page and select "Translate to English"</li>
<li>Click the checkbox, and the error will show.</li>
</ol>
<p dir="auto">The source of the example can be found at <a href="https://codesandbox.io/s/qq49kwjynj" rel="nofollow">https://codesandbox.io/s/qq49kwjynj</a><br>
The part of the code that seems to cause it is the following two lines:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="{this.state.checked &amp;&amp; &quot;選択済み&quot;}
{!this.state.checked &amp;&amp; &quot;無選択&quot;}"><pre class="notranslate"><span class="pl-kos">{</span><span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">state</span><span class="pl-kos">.</span><span class="pl-c1">checked</span> <span class="pl-c1">&amp;&amp;</span> <span class="pl-s">"選択済み"</span><span class="pl-kos">}</span>
<span class="pl-kos">{</span><span class="pl-c1">!</span><span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">state</span><span class="pl-kos">.</span><span class="pl-c1">checked</span> <span class="pl-c1">&amp;&amp;</span> <span class="pl-s">"無選択"</span><span class="pl-kos">}</span></pre></div>
<p dir="auto">Changing this to the following fixes the behavior with Google Translate:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="{this.state.checked ? &quot;選択済み&quot; : &quot;無選択&quot;}"><pre class="notranslate"><span class="pl-kos">{</span><span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">state</span><span class="pl-kos">.</span><span class="pl-c1">checked</span> ? <span class="pl-s">"選択済み"</span> : <span class="pl-s">"無選択"</span><span class="pl-kos">}</span></pre></div>
<p dir="auto"><strong>What is the expected behavior?</strong></p>
<p dir="auto">It should not produce an error.</p>
<p dir="auto"><strong>Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?</strong></p>
<p dir="auto">I created an identical example with React 15 at the following pages:<br>
<a href="https://p93xxmr0rq.codesandbox.io/" rel="nofollow">https://p93xxmr0rq.codesandbox.io/</a><br>
<a href="https://codesandbox.io/s/p93xxmr0rq" rel="nofollow">https://codesandbox.io/s/p93xxmr0rq</a><br>
When repeating the same steps outlined above, no error was produced.<br>
It only seems to affect React 16.<br>
As this is a Chrome-only feature, it only affects Chrome.</p>