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?

bind is just core javascript. It's how event binding works. It's not a React concept. — mnsr
– mnsr, Commented Jul 27, 2016 at 23:38
"which is the expected natural behavior" - nope. It's React.createClass magic - the ES6 behaviour is the natural one. — Bergi
– Bergi, Commented Jul 27, 2016 at 23:52

Community · Accepted Answer · 2020-06-20 09:12:55Z

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

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Jul 27, 2016 at 23:47

Alejandro

2702 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Danny · Accepted Answer · 2016-07-28 02:08:24Z

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.

Community · Accepted Answer · 2020-06-20 09:12:55Z

1

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

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Jul 27, 2016 at 23:41

mnsr

12.4k4 gold badges55 silver badges80 bronze badges

1 Comment

RegarBoy Over a year ago

Because when you pass your class methods to react components or elements, they get bound to the those components/elements, thus binding them to the inner class scope in constructor binds value of this to the inner class scope

Collectives™ on Stack Overflow

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

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related