-
Notifications
You must be signed in to change notification settings - Fork 47.1k
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
How to force React to reorder keyed children instead of destroying/recreating #6729
Comments
Set the key on the React will guarantee keyed children are not recreated. Read the documentation as
|
This is a usage question, rather than a bug in the React core. Usage questions are better answered on sites like StackOverflow, as we try to use github issues for tracking bugs in the React core. For this reason, I'm going to close out this issue, which takes it off our radar, but feel free to continue the conversation here (or move it to StackOverflow). |
@jamesblight that doesn't fully solve the problem; the embeds at indices 1 and 2 are maintained, but those at 0 and 3 are recreated.
I'm not sure if this is a bug, per se, but I'm just curious about how React treats keyed children. I know the documentation says that children can be reordered or destroyed, but in the case where keys are neither added nor removed, just reordered, it seems like the most sensible behavior would be to swap the position of the relevant nodes in the DOM. |
This isn't a problem with React. Moving an iframe in the DOM will cause it to reload. |
@jamesblight wow, thanks for finding that. The example linked on the accepted answer duplicates what I'm seeing exactly. That means React is behaving as expected. |
I'm using React to build an application for viewing multiple webcasts at one time. I have a
VideoGrid
component that has an arbitrary number ofVideoCell
components as children. EachVideoCell
has a unique key as described here.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 the documentation, the components should be reordered, not destroyed and recreated, because they have unique keys:
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.
I created a simple test case on JSFiddle to demonstrate the problem I'm having: https://jsfiddle.net/nwalters512/cja067cn/3/. 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.
Is there a way to force React to reorder children instead of destroying and recreating them?
The text was updated successfully, but these errors were encountered: