title: Spread operator vs JSON.parse(JSON.stringify(...)) for immutable objects
body: <p>I'm working with Redux and recently ran into a problem where I was adding messages to an array and the Redux state was not issueing a re-render on React. I'm using the <code>react-redux</code> library for this. Here's an example of the problem I was having:</p>
  
  <pre><code>// State structure
  structure: { messages: {}, groups: {} }
  
  // ---
  newState = { ...prevState };
  newState.messages[action.message.group] = action.message;
  return newState; 
  </code></pre>
  
  <p>This was updating the state however it wasn't triggering an update to the react component, however replacing <code>newState = { ...prevState }</code> with <code>newState = JSON.parse(JSON.stringify(prevState))</code> resolved the issue. </p>
  
  <p>Could anyone explain why this is happening in detail? I was under the impression that the spread operator created a clone of the object and I've never had any problems with it until now. </p>