title: Best practice in React regarding the context `this`
body: <p>Which of the following is the best practice with regard to performance in a React class component:</p>
  
  <ol>
  <li><p>Binding a call back function in the constructor:</p>
  
  <pre><code>constructor(props)
  {
      /* some code */
      this.onChange= this.onChange.bind(this)
  }
  
  render() {
     return(
        &lt;div&gt;
            &lt;input onChange={this.onChange}
        &lt;/div&gt;
     );
  }
  
  onChange(event) {
  /* some code involving 'this' */
  }
  </code></pre></li>
  <li><p>Using an arrow function instead of a normal function:</p>
  
  <pre><code>constructor(props)
  {
      /* some code */
  }
  
  render() {
     return(
        &lt;div&gt;
            &lt;input onChange={this.onChange}
        &lt;/div&gt;
     );
  }
  
  onChange = (event) =&gt; {
  /* some code involving 'this' */
  }
  </code></pre></li>
  <li><p>Sticking to a normal function but declaring an arrow function in the onChange field:</p>
  
  <pre><code>constructor(props)
  {
      /* some code */
  }
  
  render() {
  &lt;div&gt;
      &lt;input onChange={(event) =&gt; {this.onChange(event)}}
  &lt;/div&gt;
  }
  
  onChange(event) {
  /* some code involving 'this' */
  }
  </code></pre></li>
  </ol>
  
  <p>Thanks!</p>