title: React - How to properly pass and invoke functions that accepts parameters to a component
body: <p>I'm using react and I have read a lot of articles about how to use it properly and avoiding unnecessary re-rendering, and one of the topics was the way you pass functions to a component. So basically we need to avoid passing a different instance of a function like this:</p>
  
  <pre><code>&lt;Component onClick={() =&gt; ... }/&gt;
  </code></pre>
  
  <p>or</p>
  
  <pre><code>&lt;Component onClick={this.method.bind(this)} /&gt;
  </code></pre>
  
  <p>and you should bind in the constructor the function and just pass as following:</p>
  
  <pre><code>this.method = this.method.bind(this);
  
  &lt;Component onClick={this.method} /&gt;
  </code></pre>
  
  <p>Which makes perfectly sense, but now, I have a method that accepts a parameter:</p>
  
  <pre><code>onPropertyChange(field, event) {
      ...
  }
  </code></pre>
  
  <p>And I want this method to be invoked by an input whenever the value changed, the only way that I managed to do it is this:</p>
  
  <pre><code>&lt;input onChange={this.onPropertyChange.bind(this, 'id')} /&gt;
  </code></pre>
  
  <p>That works perfectly since it binds the function to my component, passes the field and the event.
  But in this way it will pass a different instance each time, which will cause unnecessary re-rendering.</p>
  
  <p>So how can I do it properly and avoid unnecessary re-rendering.</p>