Bug: Rendering a list with duplicate keys causes unexpected behavior in reconciliation

[kansalanmol0609]

Rendering a list with duplicate keys causes unexpected behavior in reconciliation. Not sure if this is a bug or not.

React version: v18.0.0

Steps To Reproduce

1. Create a list of items with duplicate strings.
2. Render the list using map, assigning key directly as the string value of each item.
3. Use either useEffect or useLayoutEffect to update the list state after the component mounts.
4. Observe the DOM output when the state updates.

Link to code example:

import { useLayoutEffect, useState } from "react";  

export default function App() {  
  const [items, setItems] = useState(["name2", "name3", "name4", "name4"]);  

  useLayoutEffect(() => {  
    setItems(["name1", "name2", "name3", "name4"]);  
  }, []);  

  return (  
    <div>  
      {items.map((item) => (  
        <div key={item}>{item}</div>  
      ))}  
    </div>  
  );  
}  

The current behavior

When using either useEffect or useLayoutEffect:

The rendered DOM contains 5 items instead of 4. React fails to reconcile the list correctly due to duplicate keys, retaining an extra DOM node.

The expected behavior

React should handle the state update and reconciliation correctly, ensuring that the rendered DOM contains only the updated list of items (4 items in this case). Duplicate keys should not lead to unexpected rendering issues.