title: why the filter function ignore the item on the react component?
body: <p>I have a comment list with 4 items, &quot;nestComments 3&quot; will print 4 items, but it prints 3 items after the filter, why?</p>
  <p><a href="https://i.stack.imgur.com/qmxHj.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/qmxHj.png" alt="enter image description here" /></a></p>
  <pre><code>console.log(&quot;nestComments 3&quot;, commentList);
      const result = commentList.filter((comment) =&gt; {
        // console.log(&quot;nestComments 3 commnetList&quot;, commentList);
        console.log(&quot;nestComments 3 commnet&quot;, comment);
        return comment.parentId === null;
      });
  console.log(&quot;nestComments 4&quot;, result);
  </code></pre>
  <p>I think there might be something related to setState statement here</p>
  <pre><code>componentDidMount() {
      console.log(&quot;componentDidMount&quot;);
      // force render
      let { comments } = this.state;
      comments.push({
        id: 7,
        parentId: null
      });
      comments = this.nestComments(comments);
      // this.setState(({ comments }) =&gt; ({
      //   comments: this.nestComments(comments)
      // }));
      this.setState({ comments });
      console.log(&quot;2nd&quot;, comments, this.nestComments(comments));
      this.setState({ comments: this.nestComments(comments) });
      // !important: React will ignore the update after setState
      comments.push({
        id: 8,
        parentId: null
      });
      // this.setState({ comments: this.nestComments(comments) });
    }
  </code></pre>
  <p>my full code is here</p>
  <p><a href="https://github.com/dotku/lab-react/blob/fa1b25f/src/features/commentList/index.js#L94-L101" rel="nofollow noreferrer">https://github.com/dotku/lab-react/blob/fa1b25f/src/features/commentList/index.js#L94-L101</a></p>