3 ways of binding this keywords in react using es6

Question

I know there are 3 ways to declare a method within a class. I used to use React.create class but I decided to go with the hype where I write in newer syntax - ES6.

I admit I have little about es6. There are 3 ways of bind this keyword.

1.

class myClass extends Components {
    constructor(props){
        super()
        this.doSomething = this.doSomething.bind(this)
    }
    doSomething(){
    }
    render(){
       return(<div onClick={this.doSomething}>click me</div>)
    }
}

2.

class myClass extends Components {
    constructor(props){
        super()
    }
    doSomething(){
    }
    render(){
       return(<div onClick={this.doSomething.bind(this)}>click me</div>)
    }
}

3.

class myClass extends Components {
    constructor(props){
        super()
    }
    doSomething(){
    }
    render(){
       return(<div onClick={e => this.doSomething}>click me</div>)
    }
}

My question is how these different ways of doing things different from each other?

Answer 1

As your question.

Method 1 is using function defined in constructor.

This method is a mix of the previous one with usage of class constructor function.

You don't have to use bind() inside your JSX anymore, but this comes with the cost of increasing the size of constructor code.

Method 2 is using of Function.prototype.bind().

As any method of ES6 class is plain JavaScript function it inherits bind() from Function prototype. So now when we call increaseQty() inside JSX , this will point to our class instance. You could read more about Function.prototype.bind() in this MDN article .

Method 3 is using fat arrow function and constructor.

ES6 fat arrow functions preserve this context when they are called. We could use this feature and redefine doSomething() inside the constructor.

Answer 2

these are examples of scoped functions.

https://ariya.io/2013/05/es6-and-block-scope

so for the first instance

onClick={this.doSomething}

onClick is outside scope from the class. so binding is required. so calling this inside it will refer to the React element (div)

second instance

onClick={this.doSomething.bind(this)}

basically the same. now you bind this from the caller of the onClick. which happens to be the class.

third instance

onClick={e => this.doSomething}

using arrows changes the context of the function, so from this refering to div, it becomes this referring to class

bonus instance

doSomething = () => {}

call it like

onClick={ this.doSomething }

Answer 3

In short, option 1 binds this in the constructor, so that the binding only happens once for each usage of a component. This comes at the expense of having to write a constructor, which might not have otherwise been necessary.

Option 2 and 3 achieve the same thing using different syntax, creating a new function with this bound every time the component is rendered.

Your option 3 should actually call the function doSomething , ie e => this.doSomething() . Personally I would either pass the event e to the function or change e to () to make it clear that the anonymous function wasn't using any parameters.

The first option is slightly more efficient, as you're not creating a new function on every render but I tend to go with option 3 because it looks nicer and I've never noticed any real performance problems with it. Up to you.

---

As an aside, if you use createClass then React handles the binding of this in your methods for you, which is something to consider when evaluating which method to go with.