You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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 Tickerskey 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.
The text was updated successfully, but these errors were encountered:
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
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
, theTickers
states are preserved. This is the behavior that I would expect, given that theTickers
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 theTickers
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
The text was updated successfully, but these errors were encountered: