title: React.js and ES6: Any reason not to bind a function in the constructor
body: <p>I'm in the process of updating a React component to ES6 and suffered the problem described in this question - <a href="https://stackoverflow.com/questions/29577977/react-ref-and-setstate-not-working-with-es6">Unable to access React instance (this) inside event handler</a> - namely not binding to the component instance.</p>
  <p>That made sense and of course worked, but I'm confused about the other part of the answer:</p>
  <blockquote>
  <p>Be aware that binding a function creates a new function. You can
  either bind it directly in render, which means a new function will be
  created every time the component renders, or bind it in your
  constructor, which will only fire once.</p>
  <pre class="lang-js prettyprint-override"><code>constructor() {
    this.changeContent = this.changeContent.bind(this);
  }
  </code></pre>
  <p>vs</p>
  <pre class="lang-js prettyprint-override"><code>render() {
    return &lt;input onChange={this.changeContent.bind(this)} /&gt;;
  }
  </code></pre>
  </blockquote>
  <p>I'm assuming that binding in the constructor is the preferred approach for performance etc, but you know what they say about <em>assume</em>!</p>
  <p>What are the trade-offs for these two approaches? Is there ever a situation where one is definitely better than the other? Or does it not matter?</p>