title: Object assign and spread operator mutate React state?
body: <p>I wonder if I did something wrong because as far as I know: Object.assign and spread operator will create new object, therefore we can avoid mutate the internal state with is a bad practice. But in my project those two don't seem to work.</p>
  
  <p>First, in my constructor, I setup the state as below:</p>
  
  <pre><code>this.state = {
    article: {
      title: "",
      alias: "",
      category: "JAVA",
      steps: [
        {
          stepId: 1,
          title: "Dummy title",
          description: "The quick brown fox jump over the lazy dog",
          length: 30
        }
      ]
    },
    description: "",
    newStep: {
      title: "",
      length: 0
    }
  }
  </code></pre>
  
  <p>Later, I add an addStep() function:</p>
  
  <pre><code>addStep() {
  
    console.log(this.state.article.steps);
  
    let article = { ...this.state.article };
  
    article.steps.push({
      stepId: _.last(this.state.article.steps).stepId + 1,
      title: this.state.newStep.title,
      length: this.state.newStep.length,
      description: "",
    });
  
    console.log(this.state.article.steps);
  }
  </code></pre>
  
  <p>And here the result:
  <a href="https://i.stack.imgur.com/CI8QN.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/CI8QN.png" alt="enter image description here"></a></p>
  
  <p>As you can see <strong>this.state.article.steps</strong> has been mutated. The same goes for Object.assign. Finally I decide to use and that solved my problem. </p>
  
  <pre><code>let article = JSON.parse(JSON.stringify(this.state.article));
  </code></pre>
  
  <p>Result:
  <a href="https://i.stack.imgur.com/ubu3F.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ubu3F.png" alt="enter image description here"></a></p>