Skip to content
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

Element gets remounted even when its key props is kept the same #15623

Closed
lowerthansound opened this issue May 11, 2019 · 1 comment
Closed

Comments

@lowerthansound
Copy link

lowerthansound commented May 11, 2019

Do you want to request a feature or report a bug?

Bug

What is the current behavior?

Child elements expressed as an array inside curly braces (eg: {[<Element />, <Element />]} are remounted when one sibling is added or removed beside the array.

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:

I came up with two examples. Their code is exactly the same, except that the first declares the elements directly in JSX and the second declares them inside an array (could be generated by Array.map):

Ticker is a generic component made up to demonstrate state. DummyElement is a generic component with no state whatsoever. App is the root component.

In the first example, you can see that, when switching between layouts, that is, when adding or removing the DummyElement, the Tickers states are preserved. This is the behavior that I would expect, given that the Tickers key props are kept the same.

In the second example, however, the Ticker state is reset whenever you switch between layouts. This is further shown in the console, that logs that the Tickers are being mounted and unmounted at each layout change.

What is the expected behavior?

The decision of mounting/remounting elements would be independent of their siblings.

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?

Locally, I'm using React 16.8.6 on Firefox 66.0.5 on Windows 10.0.17134. Not sure which version JSFiddle uses.


A Stack Overflow question related to this (it was written by me): https://stackoverflow.com/q/56082557/7835318

May be related to Issue #1493

@lowerthansound lowerthansound changed the title Element get remounted even when its key props is kept the same Element gets remounted even when its key props is kept the same May 11, 2019
@lowerthansound
Copy link
Author

Temporarily closing issue as it might be the same as #8731 (dang, I should've read it all first!)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant