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 →

Published by Bramus!

Bramus is a frontend web developer from Belgium, working as a Chrome Developer Relations Engineer at Google. From the moment he discovered view-source at the age of 14 (way back in 1997), he fell in love with the web and has been tinkering with it ever since (more …)

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.