React.js: the most efficient way to pass a parameter to an event handler without bind() in a component

Question

When an event handler uses this (juet like handleClick below uses this.setState), you have to bind the event handler with this kerword. Otherwise, you need to use the arrow function.

e.g.

//This function isn't bound whilst using "this" keyword inside of it.
//Still, it works because it uses an arrow function
handleClick = () => {
    this.setState({
      isClicked:true
    });
}

render() {
    return (
      <div className="App">
        <button onClick={this.handleClick}>Click</button>
      </div>
    );
}

However, with the approach above, you can't pass a parameter. You need to use either...

1. bind(this, param) after the function
2. the anonymous arrow function

i.e.

<button onClick={this.handleClick}>Click</button>
will be
<button onClick={this.handleClick.bind(this, 111)}>Click</button>
or
<button onClick={() => this.handleClick(111)}>Click</button>

Here is the question.

What is the most efficient way to pass a parameter to an event handler?

According to the official doc, using bind() can undermine the performance, because...

Using Function.prototype.bind in render creates a new function each time the component renders

The same goes for using the anonymous arrow function. The doc says that...

Using an arrow function in render creates a new function each time the component renders

Then, what will be the most efficient way to pass a parameter?

Any input will be appreciated.

PS

Some people have asked how param is determined. This will be determined dynamically (i.e. not always 111). So, it can be from states, props or some other functions defined in this class.

Answer 1

Instead of .binding or creating an anonymous arrow function in render(), you can create the bound/anonymous function outside of render(), such as on the instantiated object, in the constructor, or something like that, and use a reference to that singular (never re-created) function. For example, run once:

this.boundHandleClick = this.handleClick.bind(this, 111);

or

this.boundHandleClick = () => this.handleClick(111);

Then, in render, reference boundHandleClick:

return (
  <div className="App">
    <button onClick={this.boundHandleClick}>Click</button>
  </div>
);

If you need to use the parameters (111) inside of render, then you could use object lookup to see if a bound function with that parameter exists yet. If it does, just use that bound function - else, create it (once, so it won't have to be created again whenever you use that parameter in the future):

this.boundClicks = {};
// ...
if (!this.boundClicks['111']) this.boundClicks['111'] = () => this.handleClick(111);
return (
  <div className="App">
    <button onClick={this.boundClicks['111']}>Click</button>
  </div>
);