Reactアンチパターン

■ bindするのは、アロー関数を使ってハンドラを書いていない時

constructor(props) {
  super(props);
  this.onTap = this.onTap.bind(this);
}

onTap() {
  console.log("tapped!!");
}

onTap2 = () => {
  console.log("you don't need to bind this.");
}

render() {
  return (
    <div>
      <button onClick={this.onTap} />
      <button onClick={this.onTap2} />
    </div>
  );
}

■ htmlのプロパティ内で無名関数を使うと、都度新しいデータと判断され、再描画が発生する。結果パフォーマンス低下が起こる

<button onClick={() => this.onTap()} /}

参考

medium.com