React: Unexpected DOM elements in list rendering with duplicate keys

[intellild]

Do you want to request a feature or report a bug?
Reporting a bug.
What is the current behavior?
Unexpected DOM elements in list rendering
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://jsfiddle.net/tse5xcg5/1/
just switch the tabs, there are unexpected DOM elements
What is the expected behavior?
no unexpected DOM elements
Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?
tested with React >= 16
no extra elements with React 15

Duplicate keys are mistakes, but these DOM elements should not be there anyway.

[aweary]

Thanks for the report @intellild. If you check the console, you'll see the warning message you get mentions this as a possibility (emphasis mine):

Keys should be unique so that components maintain their identity across updates. Non-unique keys may cause children to be duplicated and/or omitted — the behavior is unsupported and could change in a future version.

Using duplicate keys is not supported and can result in the behavior you're seeing. In React 15 elements with non-unique keys were omitted, but that doesn't mean that the behavior is supported, or expected to remain consistent across versions. You'll definitely want to heed the warning and make sure your keys are always unique.

I hope that helps! If there's anything we can do to make the warning clearer, we'd love to hear your feedback.

Thanks!

[intellild]

@aweary
have you tried the fiddle? switch tabs cause wild elements

[aweary]

yes, I looked at your fiddle. The behavior you're seeing is because the children are being duplicated, which causes issues with how React reconciles children. Using non-unique keys is unsupported and will continue to result in inconsistent and unexpected behavior as React continues to change.

Please make sure to follow the advice of the warning and ensure your keys are always unique so you don't have to deal with strange issues like this.

[jspinella]

For anyone else who stumbles across this issue...

Using the latest version of React 15, the first element with each key is rendered, the rest are ignored, and there is no error logged to console.

Using the latest version of React 16, all elements are rendered regardless of how many share the same key, AND an error is logged to console complaining about duplicate keys.

As @aweary mentioned, this behavior can and did indeed change with the latest version of React.

[kwelch]

I am running into this same issue. However I have unique keys and we are still seeing remnant items from previous tabs linger after we switch tabs. Checking the console, the item should not be in the list since it was not included and more and the key does not match any that should are included in the render list. Even worse is that it will continue to duplicate these items as you switch tabs.

Tried to re-create in a sandbox, but it appears there is more at play.
https://jsfiddle.net/7Lhzb3e5/

I found this error 🤦‍♂️, we calculated the key and the we had two values calculate to the same key value and that was causing the duplication.

Sorry, and thanks for letting me be confused here with you all today. Carry on!