<p dir="auto">React version: 17.0.2</p>
<h2 dir="auto">Steps To Reproduce</h2>
<ol dir="auto">
<li>Make nested array element like this. All element have unique, fixed key.</li>
</ol>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="[Element0, [Element1, Element2]]"><pre class="notranslate"><code class="notranslate">[Element0, [Element1, Element2]]
</code></pre></div>
<ol start="2" dir="auto">
<li>Change the element array.</li>
</ol>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="[Element1, Element2]"><pre class="notranslate"><code class="notranslate">[Element1, Element2]
</code></pre></div>
<ol start="3" dir="auto">
<li>Key of element 1 and 2 aren't changed, but the elements are re-mounted.</li>
</ol>
<p dir="auto">This is not a problem if element 1 and 2 aren't in nested array.</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="[Element0, Element1, Element2]

-&gt; [Element1, Element2]"><pre class="notranslate"><code class="notranslate">[Element0, Element1, Element2]

-&gt; [Element1, Element2]
</code></pre></div>

<p dir="auto">Link to code example: <a href="https://github.com/jwoo0122/nested-child">https://github.com/jwoo0122/nested-child</a></p>
<p dir="auto">Clone this repo, open dev tools and see console. In App.js, I made some scenarios to test this behavior.</p>

<h2 dir="auto">The current behavior</h2>
<p dir="auto">The element with same key always unmount, if they are in nested array.</p>
<h2 dir="auto">The expected behavior</h2>
<p dir="auto">I have no idea whether this behavior is intended or kind of bug. But I expected that element have same key in same array (also in nested array) do not re-mount, just re-render. Please feedback if my expectation is not correct. Thank you.</p>
<p dir="auto"><g-emoji class="g-emoji" alias="point_right" fallback-src="https://github.githubassets.com/images/icons/emoji/unicode/1f449.png">👉</g-emoji> Please follow one of these issue templates:</p>
<ul dir="auto">
<li><a href="https://github.com/facebook/react/issues/new/choose">https://github.com/facebook/react/issues/new/choose</a></li>
</ul>
<p dir="auto">Note: to keep the backlog clean and actionable, issues may be immediately closed if they do not follow one of the above issue templates.</p>