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 Com         


        

Answer 1

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.