What is the best and most effective way to bind callbacks in ReactJS? In the constructor or in the rendering method or as the property initializer?

Question

Say I have a function in a parent component that I want to use as a callback for a child component. Which way is better?

render() {
    return (
        <Child handleClick={this.handleClick.bind(this)} />
    )
}

or

constructor() {
    super();
    this.handleClick = this.handleClick.bind(this);
}

According to this principle , it is much better to do this in the constructor, since the render () method can be called several times. That makes sense to me.

However, this simply means that the associated function eventually becomes a property for each instance. Thus defeating the entire goal of the prototype.

I know about property initializers:

handleClick = () => {
    // do stuff
}

, , , ES2017 ( ). , .

, , ?

Answer 1

, , , Airbnb React styleguide one:

✓

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

✓ ES7 ( , )

constructor(props) {
  super(props);
  this.foo = ::this.foo;
}

---

?

✖

render() {
  return <button onClick={this.handleClick.bind(this}>...</button>
}

, , , , , ( ).

✖ ( )

render() {
  return <button onClick={(e) => this.handleClick(e)}>...</button>
}

, .