React Quick Tip: Use Class Properties and Arrow Functions to Avoid Binding `this` to Methods

When you want to access this inside a class methods of your React component, you need to bind it to your method:

class Button extends Component {
  constructor(props) {
    super(props);
    this.state = { clicked: false };
    this.handleClick = this.handleClick.bind(this);
  }
  handleClick() {
    this.props.setState({ clicked: true });
  }
  render() {
    return <button onClick={this.handleClick}>Click Me!</button>;
  }
}

Binding this to handleClick in the constructor allows us to use this.setState from Component inside handleClick. Without this binding, this is re-scoped for handleClick and loses context of the component’s setState method.

But this is completely unnecessary, extra code!

You can clean up this ugliness by using some new ES6+ features. Here is the same component, rewritten using class properties and arrow functions to avoid binding this to handleClick:

class Button extends Component {
  state = { clicked: false };
  handleClick = () => this.setState({ clicked: true });
  render() {
    return <button onClick={this.handleClick}>Click Me!</button>;
  }
}

Note: You must have transform-class-properties enabled in your own Babel config in order to use class properties. If you’re using Create React App, this is already enabled for you.

Why Does This Work?

This works because of two reasons:

1. Arrow functions, by their nature, do not re-scope this, so we don’t need to bind this in the class constructor.
2. JavaScript has first-class functions, meaning functions are treated the same as data. So arrow functions can be assigned to variables, or in this case, to class properties.

Bonus Tip

Notice in the second example, I defined state as a class property as well, negating the need for a constructor.