Is there a better way to bind 'this' in React Component classes?

Question

I am currently working on a react app, and I found having to bind this a bit cumbersome when a component class has many functions.

Example

class Foo extends Component {
  constructor(props){
    super(props);
    this.function1 = this.function1.bind(this);
    this.function2 = this.function2.bind(this);
    this.function3 = this.function3.bind(this);
  }
  function1() {
    ...
  }
  function2() {
    ...
  }
  function3() {
    ...
  }
}

Is there a more efficient way to do this?

Answer 1

You can avoid having to bind methods by using the transform-class-properties Babel plugin, which is an experimental ES7 feature. Make sure you enable stage-0 in order to use it.

This allows the use of arrow functions when defining your class methods, leveraging arrow functions' lexical binding so this refers to function's context (in this case the class), like so:

class Foo extends Component {
    boundFunction = () => { /* 'this' points to Foo */ }
}

Answer 2

You can shorten it a bit with:

this.function1 = ::this.function1

You'll need https://babeljs.io/docs/plugins/transform-function-bind/