why do you need to bind a function in a constructor

Question

I have a question relavent to this code: https://github.com/reactjs/redux/blob/master/examples/async/containers/App.js

specifically:

  constructor(props) {
    super(props)
    this.handleChange = this.handleChange.bind(this)
    this.handleRefreshClick = this.handleRefreshClick.bind(this)
  }

I guess its a 2 part question.

1. Why do I need to set handle change as an instance of class this.handleChange =, can't I just use static functions for handleChange and call it directly with in the class onClick={handleRefreshClick}> ?
2. I have no idea whats going on here: this.handleRefreshClick.bind(this)

Thanks

Answer 1

Answered in reverse order...

2. this.handleRefreshClick.bind(something) returns a new function, in which references to this will refer to something. This is a way of saving the current value of this, which is in scope during the call to the constructor, so that it can be used later when the function is called.

1. If your functions don't require access to the state of your component, then sure, you don't need to bind them.

---

The argument in favour of adding these lines to the constructor is so that the new bound functions are only created once per instance of the class. You could also use

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

or (ES6):

onClick={() => this.handleRefreshClick()}

but either of these methods will create a new function every time the component is re-rendered.

Answer 2

The reason why it's being done, is to bind the this keyword to that object. Like Tom said, calling a function from a class doesn't mean it's being called with the context of the object that created that function.

I think you might be getting confused because in the React examples/tutorials, using React.createClass() DOES bind this automatically for you. So you might be wondering why React.createClass() does it, but doesn't with ES6 class syntax.

This is because React didn't want to mess with ES6 specifications (binding this to functions from its class is not in the ES6 class spec), but at the same time, wanted to give its users the convenience of ES6 class syntax. You can read more about this below.

Github issue

Hopefully that sheds some light on why that happens.

Answer 3

These 2 functions handleChange and handleRefreshClick are passed down as props to other components ,

They are bind to this because when the child component will call these functions they will always execute with the APP context.

You can remove these functions from the class but still you need to bind this since you would be updating some parts of your APP