Comment by alxlu

Having .bind inside a JSX prop also creates a new anonymous function on each render.

To avoid it, you can do (sorry for bad formatting):

  class Thing extends React.Component {
    handleClick = (thingId) => {
      this.setState(/*stuff*/);
    }
    render() {
      return <div>{things.map(thing => <Thing onClick= 
   {this.handleClick} />)}</div>
    }
  }

You can also bind handleClick inside the constructor without the arrow.

  constructor(...args) {
    super(...args);
    this.handleClick = this._handleClick.bind(this);
  }
  _handleClick(thing) {
    // stuff
  }