Why is it necessary to use bind when working with ES6 and ReactJS?

Question

Using ES5 development with ReactJS, a component can be stated as the following:

var MyComponent = React.createClass({
  alertSomething: function(event) {
    alert(event.target);
  },

  render: function() {
    return (
      <button onClick={this.alertSomething}>Click Me!</button>
    );
  }
});

ReactDOM.render(<MyComponent />);

In this example, the this references the object itself, which is the expected natural behavior.

Question

My question is:

How you use ES6 to create components?

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
  }

  alertSomething(event) {
    alert(event.target);
  }

  render() {
    return (
      <button onClick={this.alertSomething.bind(this)}>Click Me!</button>
    );
  }
}

ReactDOM.render(<MyComponent />);

Knowing that in JavaScript the this references the instantiated object itself when using the new operator, someone can tell me what is the real purpose of using bind? It is something related to the internal mechanisms of React?

Answer 1

one of the purpose of bind in React ES6 classes is that you have to bind manually.

No Autobinding

Methods follow the same semantics as regular ES6 classes, meaning that >they don't automatically bind this to the instance. You'll have to >explicitly use .bind(this) or arrow functions =>:

We recommend that you bind your event handlers in the constructor so they >are only bound once for every instance:

constructor(props) {
  super(props);
  this.state = {count: props.initialCount};
  this.tick = this.tick.bind(this);  // manually binding in constructor
}

you can read more from the docs: https://facebook.github.io/react/docs/reusable-components.html

Answer 2

var cat = {
  sound: 'Meow!',
  speak: function () { console.log(this.sound); }
};

cat.speak(); // Output: "Meow!"

var dog = {
  sound: 'Woof!'
};
dog.speak = cat.speak;

dog.speak(); // Output: "Woof!"

var speak = cat.speak;
speak(); // Output: "undefined"

speak = cat.speak.bind(dog);
speak(); // Output: "Woof!"

Explanation:

The value of "this" depends how the function is being called. When you provide this.alertSomething as your button's onClick handler, it changes how it will be called since you are providing a direct reference to that function, and it won't be called against your object instance (not sure if I'm phrasing that right).

The .bind function will return a new function where "this" is permanently set to the value passed to it.

ECMAScript 5 introduced Function.prototype.bind. Calling f.bind(someObject) creates a new function with the same body and scope as f, but where this occurs in the original function, in the new function it is permanently bound to the first argument of bind, regardless of how the function is being used.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this

It's best to do this in your component's constructor so that .bind is happening just once for each of your handlers, rather than on every render.

Answer 3

bind is just core javascript. It's how binding events works. It's not a React concept.

The following article explains it pretty well.

Bounded function in JavaScript is a function that is bounded to a given context. That means no matter how you call it, the context of the call will stay the same.

To create a bounded function out of the regular function, the bind method is used. bind method take context to which you want to bind your function as a first argument. The rest of arguments are arguments that will be always passed to such function. It returns a bounded function as a result.

http://reactkungfu.com/2015/07/why-and-how-to-bind-methods-in-your-react-component-classes/

Also, on a side note, you should do all of your event binding in your constructor, not in your render method. This will prevent multiple bind calls.

Here's another good bit of information on the subject. They say:

We recommend that you bind your event handlers in the constructor so they are only bound once for every instance

https://facebook.github.io/react/docs/reusable-components.html