React binding function

51
February 09, 2019, at 12:30 PM

I have seen a lot of reactjs places where a function is called like below

onChange = {this.fileSelected}

whereas I have seen its usage like below as well

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

I want to ask if they both mean the same or is there any difference and what to use when.

Answer 1

onChange={this.fileSelected}

Is preferable because it does not cause unnecessary re-renders.

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

When you pass an anonymous function like this it will actually be called on all instances of the class instead of the one that the event was triggered on.

From a high level in may seem like they have the same behavior but if you were to use the second method consistently through a large codebase the performance of your application would suffer.

This article goes more in depth on the issue:

https://medium.freecodecamp.org/why-arrow-functions-and-bind-in-reacts-render-are-problematic-f1c08b060e36

Answer 2

If you use First:

onChange = {this.fileSelected}

It will only execute when onChange is called. If you want to bind this function then you have to declare it in the component class constructor like this:

constructor(props) {
    super(props);
    this.state = {
      // your state
    };
    this.clearDisplay = this.clearDisplay.bind(this);
}

The Second one:

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

This defines an anonymous function but, does not call it. Only when onClick is fired is it called. However, in some cases using an anonymous function can cause performance issues. That anonymous function will be defined on every render - and if you have a component that is re-rendering very often it can hurt the performance of your application. If you are sure that the component will not be rendered often, an anonymous function should be fine for convenience.

Answer 3

onChange = {this.fileSelected}

This will direct bind fileSelected function to onChange method. so when onChange method called it will call fileSelected function.

while

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

This will call onClick function in which you are calling clearDisplay function. so when you onClick method called, first anonymous called in which clearDisplay function called. So basically in this method two functions called. in this methos you can do additional calls or other things

e.g.

onClick={() => {
  console.log("this function called")
  this.clearDisplay();
}
READ ALSO
how do I push, pop, and remove certain values from mysql json array in sequelize

how do I push, pop, and remove certain values from mysql json array in sequelize

I have a column with a sequelize type of sequelizeJSON I added an array to it and it shows up in mysql via workbench like this: []

55
Where does the callback within this express app coming from?

Where does the callback within this express app coming from?

after some freecodecamp I started doing the Express js tutorial from MDN (https://developermozilla

44
HTML question in how to change a file using tables to now use layers [on hold]

HTML question in how to change a file using tables to now use layers [on hold]

I'm new to programming and got landed with a not so good professor for my first programming course so I'm trying to teach myself a lot of things

27
Using AWS Lambda to run Python script, how can I save data?

Using AWS Lambda to run Python script, how can I save data?

I have a script that gathers data from an API, and running this manually on my local machine I can save the data to a CSV or SQLitedb file

55