javascript - Difference of .bind() to arrow function () => usage in React

Question

Suppose that I have a function generateList() that updates the state and mapping it to an onClick to a <li>.

<li className="some-classname"}  
    onClick={this.generateList('product')}> Product </li>

There are times that I encounter errors like:

Warning: setState(...): Cannot update during an existing state transition (such as withinrender). Render methods should be a pure function of props...

And such. I mined the internet for answers for this, and came upon such answer like:

<li className="some-classname"}  
    onClick={this.generateList.bind(this, 'product')}> Product </li>

But I saw one answer too (in Github, but can't seem to find it) that

<li className="some-classname"}  
    onClick={() => this.generateList('product')}> Product </li>

What's the major difference? Which is more appropriate and efficient? And what's the reason that we should use such .bind and () => when mapping a function to an onClick or as a property of a React component (which I mostly use it)?

Answer 1

If you try:

<li className="some-classname"}  
    onClick={this.generateList('product')}> Product </li>

That function will be executed on every render - which can produce an additional render, which is what throws the error. What we want is to define a function that will be called later when onClick is fired.

The second one is defining a method and .bind is binding the context of the React class this to the method. Note that the bind function returns a copy of a function - So this doesn't call the function, just defines it for the onClick handler to use.

The last one:

<li className="some-classname"}  
    onClick={() => this.generateList('product')}> Product </li>

This defines an anonymous function but, similar to the second implementation, 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.

Additionally when using bind you can declare it in the component class constructor like this:

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