New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
List items with unique key
get re-rendered when order of items changes.
#13209
Comments
Hey @dhruvparmar372! This seems to be a limitation of the DOM. To demonstrate this, I created this JSFiddle which changes the order of two DOM nodes and then applies a class to trigger a transition. It turns out, you can work around this issue by triggering a reflow between changing the order and updating the animation properties. I added a bit of code to your CodeSandbox make it visible when a component is recreated by React by changing the In addition to that, I applied the reflow workaround to your example by splitting the update into two |
hey @philipp-spiess thanks for clarifying the issue and the examples for the workaround. |
Hi, @philipp-spiess I have the same problem with sorting list 😔 Here is an example: I know how to work around the issue (commented in the code) but it works fine only on lists which items quantity never changes. So If I want to add or remove item - the stuff becomes incredibly complex. How can I use your reflow overload solution to make it happen in my example? Thanks in advance! 😊 |
Do you want to request a feature or report a bug?
Bug
What is the current behavior?
When rendering a list of items with
key
set as unique property on each item element, if order of items changes from previous render, the item elements whose indexes changed are re-rendered(new instance is created) instead of re-using existing instance(mapped via key).For e.g https://codesandbox.io/s/r5p48kzop
Rendering a list
boxes
with each box havingid
,top
,left
&color
props. Every750ms
we update the (top
,left
) values for all the elements insideboxes
array.While updating if the order of elements doesn't change then every box animates to it's new position. However if we uncomment line 31 which shuffles the boxes, then only elements which retain their position from previous render animate to new positions.
You can observe this behaviour in the sandbox. With
_shuffle
on sometimes boxes jump to their new positions while with_shuffle
off they always animate.If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem. Your bug will get fixed much faster if we can run your code and it doesn't have dependencies other than React. Paste the link to your JSFiddle (https://jsfiddle.net/Luktwrdm/) or CodeSandbox (https://codesandbox.io/s/new) example below:
https://codesandbox.io/s/r5p48kzop
What is the expected behavior?
Regardless of the order of
boxes
all the box elements should animate to their new positions since they have uniquekey
property set on them.Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?
React
16.3.2
&16.4.1
, Chrome, MacOS.The text was updated successfully, but these errors were encountered: