Have you ever experience reading an existing React code base and wondering why is there a need for `this.functionName = this.functionName.bind(this)` in the React component constructor? And what make it more confusing is when not all function has binding syntax.

![](https://www.gravatar.com/avatar/644e5ef3d97ee45cfeb3940ac6d60f17?s=80)

> If you looking for a quick-fix this problem, one of the solution (and is actually the best solution) would to simply turn all your function to arrow function. Arrow function takes `this` from the outer lexical scope. Here’s an example based on the above. You will need to add [this](https://babeljs.io/docs/en/babel-plugin-transform-class-properties/) to your babel config

![](https://www.gravatar.com/avatar/644e5ef3d97ee45cfeb3940ac6d60f17?s=80)

### This is not due to React

It’s how JavaScript works. There are plenty of articles elsewhere explaining how JavaScript and especially what `.bind()` means(which is how this context get passed over), and how JavaScript bind for you. Instead, I’ll go straight to the _abyss_ in JavaScript.

![](https://www.gravatar.com/avatar/644e5ef3d97ee45cfeb3940ac6d60f17?s=80)

Reference code for the below

Deep down in JavaScript, when you do `cat.sayHi()` JavaScript returns a [Reference Type](https://tc39.github.io/ecma262/#sec-reference-specification-type) value of `(cat, "sayHi", true)`. ReferenceType(base, name, strict) where

*   base is the object
*   name is the property (or method)
*   strict = true when `use strict`

When JavaScript returns Reference Type value of `(cat, "sayHi", true)`, it means the property `sayHi` will have `cat` as `this` context. The last parameter is to decide the value of`this` if the object is `undefined`. It will be `undefined` if `true` or `global window object` if false.

However when you do `var dogHi = dog.sayHi`, JavaScript discard away the Reference Type value and only store the function into dogHi. As a result when you execute `dogHi`, it does not know that the value of`this` is dog and throw `cannot read property 'name' of undefined`

### Back to the React Example

Referencing back to the earlier example, when we do `onClick={this.handleClick}`, we are basically assigning callback a function similar to us doing `var dogHi = dog.sayHi`.

And to solve this, we could use arrow function rely on outer lexical context (the Animal class) where the function was created:

![](https://www.gravatar.com/avatar/644e5ef3d97ee45cfeb3940ac6d60f17?s=80)

I hope this helps, arrow functions are useful in many more context. I’ll leave those in another article.

Too Long; Didn't Read

Cassandra Forward a free Cassandra-focused community event

Demystifying this.bind in React

Too Long; Didn't Read

@steveng

RELATED STORIES