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

Solution 1:

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.

Solution 2:

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