React Binding Patterns: 5 Approaches for Handling this

1-YJI4x0i0lJA110oRvjwNBw

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

On a sidenote, ES2017+ will sport the Function Bind Operator (::) which acts a a shorthand for .bind(context).

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

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

JavaScript ES7 Function Bind Syntax →

Leave a comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.