arrow-v-method-bind.jsx

export class BadFunComp extends React.PureComponent {
  handleFun() {
    const { funApi } = this.props;
    funAPi();
  }
  render() {
    // displayCoolness.props.handleFun will always have a new ref value
    // causes child to re-render on ever BadFunComp render
    return (
      <DisplayCoolness onFun={ () => this.handleFun() } />
    );
  }
}

export class GoodFunComp extends React.PureComponent {
  constructor(...args) {
    super(...args);
    // add bound method to instance
    this.handleFun = this.handleFun.bind(this);
  }
  handleFun() {
    const { funApi } = this.props;
    funAPi();
  }
  render() {
    // displayCoolness.props.handleFun always points to the same function
    // displayCoolness does not needlessly re-render
    return (
      <div>
        <DisplayCoolness onFun={ this.handleFun } />
      </div>
    );
  }
}