React Binding Patterns: 5 Approaches for Handling this

Cory House:

There are at least five ways to handle the this context in React. Let’s consider the merits of each approach.

1. Use React.createClass
2. Bind in Render
3. Use Arrow Function in Render
4. Bind in Constructor
5. Use Arrow Function in Class Property

Currently I’m mostly using Approach 4 (“Bind in Constructor”), but Approach 5 (“Arrow Function in Class Property”) looks like something to switch to after having read the post.

React Binding Patterns: 5 Approaches for Handling this →

// ES2015
this.logMessage = this.logMessage.bind(this);

// ES2017
this.logMessage = ::this.logMessage;