title: React.js: the most efficient way to pass a parameter to an event handler without bind() in a component
body: <p>When an event handler uses <code>this</code> (juet like <code>handleClick</code> below uses <code>this.setState</code>), you have to bind the event handler with <code>this</code> kerword. Otherwise, you need to use <a href="https://reactjs.org/docs/handling-events.html" rel="nofollow noreferrer">the arrow function</a>.</p>
  <p>e.g.</p>
  <pre><code>//This function isn't bound whilst using &quot;this&quot; keyword inside of it.
  //Still, it works because it uses an arrow function
  handleClick = () =&gt; {
      this.setState({
        isClicked:true
      });
  }
  
  render() {
      return (
        &lt;div className=&quot;App&quot;&gt;
          &lt;button onClick={this.handleClick}&gt;Click&lt;/button&gt;
        &lt;/div&gt;
      );
  }
  </code></pre>
  <p>However, with the approach above, you can't pass a parameter. You need to use either...</p>
  <ol>
  <li><code>bind(this, param)</code> after the function</li>
  <li>the anonymous arrow function</li>
  </ol>
  <p>i.e.</p>
  <pre><code>&lt;button onClick={this.handleClick}&gt;Click&lt;/button&gt;
  will be
  &lt;button onClick={this.handleClick.bind(this, 111)}&gt;Click&lt;/button&gt;
  or
  &lt;button onClick={() =&gt; this.handleClick(111)}&gt;Click&lt;/button&gt;
  </code></pre>
  <p>Here is the question.</p>
  <p>What is the most efficient way to pass a parameter to an event handler?</p>
  <p>According to <a href="https://reactjs.org/docs/faq-functions.html" rel="nofollow noreferrer">the official doc</a>, using <code>bind()</code> can undermine the performance, because...</p>
  <blockquote>
  <p>Using Function.prototype.bind in render creates a new function each time the component renders</p>
  </blockquote>
  <p>The same goes for using the anonymous arrow function. The doc says that...</p>
  <blockquote>
  <p>Using an arrow function in render creates a new function each time the component renders</p>
  </blockquote>
  <p>Then, what will be the most efficient way to pass a parameter?</p>
  <p>Any input will be appreciated.</p>
  <p><em><strong>PS</strong></em></p>
  <p>Some people have asked how <code>param</code> is determined. This will be determined dynamically (i.e. not always <code>111</code>). So, it can be from states, props or some other functions defined in this class.</p>