javascript - What is the difference between both button click in the given React Component?

Question

Is there any difference between both the button click event in the given component? Which is the preferred way to write?

export default class App extends Component {
  doSomething = () => {
    console.log('Hi');
  }
  render() {
    return (
      <Container>
        <Button onClick={this.doSomething} title="Test" /> 
        <Button onClick={() => this.doSomething()} title="Test" />
      </Container>
    );
  }
}

Answer 1

When you don't need to pass the parameter, you can just use

{this.doSomething}

But if you need to pass the parameter to the function, then this will cause your method to execute immediately:

{this.doSomething(param)}

Thus, not to execute the function immediately, we need to use arrow method like you used:

{() => this.doSomething(param)}

---

Thus, in your case both are same. Because they are only executed when onClick is called ie. you click on the element.

---

Bonus:

You can still use the first way even you want to pass the parameter:

{this.doSomething(param)}

But for this, you need to define your method like this:

doSomething = (param) => () => {
  console.log('Hi');
}

---

Furthermore, if you wish to use event object, then you may use like below:

doSomething = (param) => (event) => {
  console.log('Hi');
}

Or, with the second approach ie. with arrow function:

{(event)=>this.doSomething(event,param)}

---

And obviously, if you are worried about performance, I would suggest not to use inline arrow function. The preferred way to use:

doSomething = (param1, param2,) => (event) => {

---

Misunderstanding:

Some people might find the method that pass the parameter without using inline arrow function will also work. But this is incorrect. Let me clarify on this.

When you use {this.doSomething(param)}, this function seems to work fine with its parameter. But if you change the state inside the handler, then you'll know the big difference. You'll get error maximum update depth exceeded react.

But with the same, you can avoid that error and also avoid the performance issue, you'll need to define the method like I stated before with arrow function:

doSomething = (param) => () => {