A doubt behaviour using the PureComponent

What is the current behavior?

I’ve met a strange behaviour using PureComponent:

It’s normal to unincrease the number when click the add button as follow(shallowEqual return true):

class B extends React.PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
    this.click = this.click.bind(this);
  }

  click() {
    this.setState({
      count: ++this.state.count
    });
  }

  render() {
    return (
      <div>
        <button onClick={this.click}>add</button>
        <div>{this.state.count}</div>
      </div>
    );
  }
}

but I’m doubt it’s normal to increase the number when using like follow: link

click() {
  const state = Object.assign({}, this.state);

  this.setState({
    count: ++state.count
  });
}

In my option, the effect of { count: ++this.state.count } is same as { count: ++state.count }. I don’t know why the second way can do it ? Thanks for replying.

[AliasT]

@MuYunyun, your ++this.state.count have already change the state to new version

const t = ++this.state.count
console.log(t === this.state.count) // => true
this.setState({
  count: t
})

[MuYunyun]

@AliasT It’s surprised. 👍 I understand, Thanks.

I’ve writen a post about this issue in Chinese.