Array concatenation results in unexpected duplication in React state management
I've been researching this but I'm facing an issue with array concatenation in a React application where I use state management with hooks. I'm trying to update an array in the state, but after merging two arrays, I end up with unexpected duplicates. Here's the relevant code snippet: ```javascript import React, { useState } from 'react'; const MyComponent = () => { const [items, setItems] = useState([1, 2, 3]); const additionalItems = [2, 3, 4, 5]; const handleMerge = () => { // Attempt to merge arrays setItems([...items, ...additionalItems]); }; return ( <div> <button onClick={handleMerge}>Merge Arrays</button> <div>{JSON.stringify(items)}</div> </div> ); }; export default MyComponent; ``` When I click the 'Merge Arrays' button, I expect to see `[1, 2, 3, 2, 3, 4, 5]`, but instead, I get `[1, 2, 3, 2, 3, 4, 5]` without any unwanted duplicates. I know that using the spread operator should combine the arrays, but the duplicates are confusing me. I tried adding a function to filter out duplicates before setting the state: ```javascript const handleMerge = () => { const mergedItems = [...items, ...additionalItems]; const uniqueItems = [...new Set(mergedItems)]; setItems(uniqueItems); }; ``` However, I still see duplicates. I also checked that `additionalItems` is defined and does not contain any unexpected values. I'm using React v17, and I double-checked the hooks setup. Any ideas on what might be causing this behavior? Is there a best practice for handling this type of array merging to avoid duplicates in state updates? This is happening in both development and production on Ubuntu 20.04. I'm coming from a different tech stack and learning Javascript. Is this even possible?