reactjs - 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.