<p dir="auto">This is created as opposite to <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="158449680" data-permission-text="Title is private" data-url="https://github.com/facebook/react/issues/6959" data-hovercard-type="issue" data-hovercard-url="/facebook/react/issues/6959/hovercard" href="https://github.com/facebook/react/issues/6959">#6959</a>.</p>
<p dir="auto">There is a bug in React and it should be fixed to match DOM behaviour instead of solution proposed in <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="158449680" data-permission-text="Title is private" data-url="https://github.com/facebook/react/issues/6959" data-hovercard-type="issue" data-hovercard-url="/facebook/react/issues/6959/hovercard" href="https://github.com/facebook/react/issues/6959">#6959</a>.</p>
<p dir="auto">See <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="158449680" data-permission-text="Title is private" data-url="https://github.com/facebook/react/issues/6959" data-hovercard-type="issue" data-hovercard-url="/facebook/react/issues/6959/hovercard?comment_id=228578350&amp;comment_type=issue_comment" href="https://github.com/facebook/react/issues/6959#issuecomment-228578350">#6959 (comment)</a></p>
<p dir="auto">I'm using React to build an application for viewing multiple webcasts at one time. I have a <code class="notranslate">VideoGrid</code> component that has an arbitrary number of <code class="notranslate">VideoCell</code> components as children. Each <code class="notranslate">VideoCell</code> has a unique key as described <a href="https://facebook.github.io/react/docs/multiple-components.html#dynamic-children" rel="nofollow">here</a>.</p>
<p dir="auto">I'm trying to implement the ability to swap the positions of webcasts on the screen. It's important that the DOM nodes are reordered and not recreated, in order to prevent the webcast embeds from reloading. Based on <a href="https://facebook.github.io/react/docs/multiple-components.html#dynamic-children" rel="nofollow">the documentation</a>, the components should be reordered, not destroyed and recreated, because they have unique keys:</p>
<blockquote>
<p dir="auto">When React reconciles the keyed children, it will ensure that any child with <code class="notranslate">key</code> will be reordered (instead of clobbered) or destroyed (instead of reused).</p>
</blockquote>
<p dir="auto">The problem there is the "...or destroyed". It's vital that my components be reordered and not destroyed. I don't know how the diffing algorithm decides which components to reorder and which to destroy and recreate, but I'm seeing a mix of the two behaviors that doesn't do what I want.</p>
<p dir="auto">I created a simple test case on JSFiddle to demonstrate the problem I'm having: <a href="https://jsfiddle.net/nwalters512/cja067cn/3/" rel="nofollow">https://jsfiddle.net/nwalters512/cja067cn/3/</a>. Click the button to swap the keys assigned to the first and last components. Note how the last component is correctly moved to the first position, but the remainder of the components (including the ones at indices 1 and 2, who don't change at all!) are destroyed and recreated. You can see that by how the embedded video reloads.</p>
<p dir="auto">Is there a way to force React to reorder children instead of destroying and recreating them?</p>