0

The React Documentation on Reconciliation says

When children have keys, React uses the key to match children in the original tree with children in the subsequent tree.

I understand that with every list item having a unique key, the DOM doesn't have to be updated when the list items don't change.

However, what happens when you have a large list of 1000 elements with unique keys, but 3 elements have duplicate keys? Are all other list items with unique keys safe from being re-rendered again? Or do the few items with the same key render the diffing algorithm useless?

jacoballenwood
  • 2,787
  • 2
  • 24
  • 39

1 Answers1

1

React will think the items with the same keys are the exact same item and when it tries to compute changes to the DOM, will only render 1 of the 3 items. A quick code scan shows it will try to be optimistic and complete rendering the other items successfully.

skav
  • 1,400
  • 10
  • 16