Btukfyl

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>

    );

  }

}

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) => () => {

From doc

<Button onClick={() => this.doSomething()} title="Test" />

The problem with this syntax is that a different callback is created
each time the Button renders. In most cases, this is fine.
However, if this callback is passed as a prop to lower components,
those components might do an extra re-rendering.

<Button onClick={this.doSomething} title="Test" /> 

We generally recommend binding in the constructor or using the class
fields syntax, to avoid this sort of performance problem.

First we will look when to use both:

1. 
   

   onClick={this.doSomething} : This is using class variable directly, but it cannot be used when we are required to pass parameters to the function. For that, the second way comes to rescue.
   A way to pass parameters to this is :

   
   
   

   onClick={this.doSomething.bind(params, this)}

   
   


2. 
   

   onClick={() => this.doSomething()}: you can pass parameters to the function as

   
   
   

   onClick={() => this.doSomething(param1, param2)}.

   
   

Also, an important point to note, when the component re-renders, memory is allocated for the second one every time, while the first one just uses memory reference. So, first one is better if you don't have to pass parameters in the function.