Differences in arrow function and no arrow function in ReactJS?

Question

I am currently very confused about when should we use arrow function and when we should not. I did the search about this but still I'm not clear. For example, I create a button to count clicks, the code is like below:

 class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = {counter: 0};
  }
  buttonPressedIncrease = () => {
    this.setState((prevState) => {
      return {counter: prevState.counter + 1}
    });
  }
  render() { 
    return (
      <div>
        <div>Counter: {this.state.counter}</div>
        <button onClick={this.buttonPressedIncrease}>+</button>
      </div>
    );
  }
}

When I use arrow function on the button like this: onClick={() => this.buttonPressedIncrease}, the function does not work like I use in the code above.

Anyone can explain for me this problem? When will arrow function work and when will it not?

Many thanks in advance.

Answer 1

In short, event listeners such as onClick expect to be given a reference to the function you want to invoke.

With this in mind:

onClick={this.buttonPressedIncrease}

is correct because this.buttonPressedIncrease is a reference to a function and it is the one you want to run.

---

However,

onClick={() => this.buttonPressedIncrease}

is incorrect because while () => this.buttonPressedIncrease is a function reference, it is not the function you want to execute. You don't want to execute the anonymous function () => this.buttonPressedIncrease, you want to execute this.buttonPressedIncrease. Remember that functions are only invoked with (). Ignoring the parenthesis only returns their reference. That's why this won't work - the anonymous function doesn't invoke the wanted function.

---

Though, if you want, you could do:

onClick={() => this.buttonPressedIncrease()}

because the anonymous function will invoke the wanted function. Though I'd stick to the former solution.