Why we don't need to bind the arrow function in React?

Question

We all know that we need to bind function in React to make it work. I do know why do we need to bind it.

But I'm not sure why we don't need to bind arrow function.

Example: Using arrow function (No bind in required)

handleClick = () => {
  this.setState({
    isToggleOn: !this.state.isToggleOn
  });

};

Now, Using function (Bind is required)

this.handleClick = this.handleClick.bind(this);

handleClick() {
  this.setState({
    isToggleOn: !this.state.isToggleOn
  });

};

I'm not asking why we need bind in function. I just want to know why binding is not required in arrow function.

Thanks.

Answer 1

Simply because arrow function does not have the following in its context:

• this
• arguments
• super
• new.target

So when you reference this inside an arrow function it treat this as any other variable and look for its declaration in its scope first and it can not find it so it search the upper scope which is the this referring to the react component class which what is required so we do not need to bind the this to the class.

Answer 2

To quote MDN:

An arrow function expression has a shorter syntax than a function expression and does not have its own this, arguments, super, or new.target. These function expressions are best suited for non-method functions, and they cannot be used as constructors.

Further,

Until arrow functions, every new function defined its own this value (based on how function was called, a new object in the case of a constructor, undefined in strict mode function calls, the base object if the function is called as an "object method", etc.). This proved to be less than ideal with an object-oriented style of programming.

So basically, the reason we don't need to bind is because this does not exist in the context of the arrow function. So, it goes up to the next level and uses the this it finds there.