<p dir="auto"><a href="https://codesandbox.io/s/vqk87kvj1y" rel="nofollow">https://codesandbox.io/s/vqk87kvj1y</a>. List contains 10000 items, I move one item from bottom to top and react performs 9999 insertBefore operations. It sucks. Take a look at infernojs example  <a href="https://jsbin.com/qeqatiruko/1/edit?html,js,output" rel="nofollow">https://jsbin.com/qeqatiruko/1/edit?html,js,output</a> - it will perform only one insertBefore operation for one move in all cases.</p>
<p dir="auto"><strong>Do you want to request a <em>feature</em> or report a <em>bug</em>?</strong></p>
<p dir="auto">Not sure if it's a bug or an 'accepted' behavior. But this can affect performance in some situations or even 'break the expectations' in others (e.g. animating moved elements [i.e. simple moves])</p>
<p dir="auto"><strong>What is the current behavior?</strong></p>
<p dir="auto">When a child element moves from the end of the list to the front  React actually moves all the other elements after the moved/last element instead of simply inserting the moved element at the front of the list.</p>
<p dir="auto">This also can be stated more generally for an element or a block of elements moving backward with a significant shift.</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: <a href="https://jsfiddle.net/84v837e9/" rel="nofollow">https://jsfiddle.net/84v837e9/</a>).</strong></p>
<p dir="auto">Here is a <a href="https://codesandbox.io/s/wjZkrGVzJ" rel="nofollow">demo</a> that shows the DOM operations performed on DOM nodes (moves &amp; insertions) during reconciliation. To reproduce the issue</p>
<ul dir="auto">
<li>
<p dir="auto">type '0123456789x' in the input field then click <code class="notranslate">Patch!</code></p>
</li>
<li>
<p dir="auto">now type 'x0123456789' (move the last 'x' to the front) then click <code class="notranslate">Patch!</code> again</p>
</li>
</ul>
<p dir="auto">Here's the output</p>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/5453835/28969007-affc2dae-791a-11e7-951a-37856bc53f00.png"><img src="https://user-images.githubusercontent.com/5453835/28969007-affc2dae-791a-11e7-951a-37856bc53f00.png" alt="image" style="max-width: 100%;"></a></p>
<p dir="auto">Instead of moving the 'x' to the front. React actually moves all the other elements after the 'x'</p>
<p dir="auto"><em>Note: the demo uses MutationObserver api to find out the operations. But you can also verify this behavior directly by commenting out the code that activates the dom observer (in componentDidMount) and watch the dom operations manually in the devtools element inspector</em></p>
<p dir="auto"><strong>What is the expected behavior?</strong></p>
<p dir="auto">React should perform the minimal number of operations. I know that the 'minimum' will vary for each situation and not trivial to infer for the general case. But for some common cases like this one it should be feasible.</p>
<p dir="auto">For info this use case is handled in most of the other virtual dom libs like preact, snabbdom. Inferno is a remarkable case as it will always infer the minimum number of operations (it uses an algorithm to find the <a href="https://en.wikipedia.org/wiki/Longest_increasing_subsequence" rel="nofollow">longest increasing subsequence</a> on an array containing the indexes of the old elements).</p>
<p dir="auto">I found this behavior while working on a demo to find out how vdom libs rearrange nodes during children reconciliation. For example here is the same output for other libs (<a href="https://codesandbox.io/s/BkLpXYQn" rel="nofollow">demo</a>)</p>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/5453835/28969902-567219c0-791e-11e7-9f3d-29bf988cdab1.png"><img src="https://user-images.githubusercontent.com/5453835/28969902-567219c0-791e-11e7-9f3d-29bf988cdab1.png" alt="image" style="max-width: 100%;"></a></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">The demo uses the 0.16 version. But I tried with 0.15 and it has the same behavior</p>