Increment syntax: two pluses ain't as plus one? (Reactjs)

Question

Why this example is working

 showNext = () => {
    const { current, total } = this.state;
    this.setState({
      current: current + 1 === total ? 0 : current + 1
    });
  };

and this one is not

 showNext = () => {
    const { current, total } = this.state;
    this.setState({
      current: current++ === total ? 0 : current++
    });
  };

And this one isn't working too

  showNext = () => {
    const { current, total } = this.state;
    this.setState({
      current: ++current === total ? 0 : ++current
    });
  };

Two last exapmles do error. And script ain't working. Fn is just a part of whole script. — Roman T, Nov 16 '18 at 09:26
++current will increment and compare the value, but if you return ++current, it will return a double incremented value, A correct solution would be `current: ++current === total ? 0 : current`, however it isn't recommended to mutate state directly since it will lead to unexpected issues — Shubham Khatri, Nov 16 '18 at 09:28

score 1 · Accepted Answer · answered Nov 16 '18 at 09:26

Because var +1 creates a new variable that is evaluated and leaves var untouched.

Post and pre increment (++var var++) actually change the variable. So in these examples you are increasing the variable both when you evaluate it and when you assign it.

Increment syntax: two pluses ain't as plus one? (Reactjs)

1 Answers1