React method binding explained

Question

Hope this will help newcomers to understand the purpose of method binding in react. There's a good explanation [here][1] and [here][2], but this will be more to the point and crux of the problem.

It's not clear what you are trying to accomplish with this post. Firstly, it looks like you want to ask a question and self answer, but you didn't **actually ask a question here**. Secondly, the concept you are making an attempt to discuss has been covered in other questions, and your answer has flaws in it's description of the subject matter. All in all, this isn't very useful. — Claies, Feb 15 '18 at 00:58

score 0 · Answer 1 · answered Feb 15 '18 at 00:41

0

Consider this class:

class Pizza extends Component {
    constructor(props);
    super(props);
    this.state = { text: 'hello world' };


    hi () {
      console.log(this.state.text);    
    }

    render() {
       return (
         <div>
           <button onClick={this.test}>
             Click me
           </button>
         </div>
       );
    }
}

If you click on the button, you will see:

Uncaught TypeError: Cannot read property 'state' of null

This is because the method is not 'bound' to the context of the class Pizza. In another words, the method is not associated with class Pizza, unlike other programming languages like java, where, when a method is defined within an object, it is automatically pointing to that instance of the object.

One way to fix this as mentioned in the links provided is to do this:

test = () => {
    console.log(this.state.text);
  };

And you will see:

hello world

Now the method is bounded to the context of Pizza class. To put it simply, the test() method needs to print out the variable 'state.text' within the pizza class, so we need to 'bind' the method to that pizza object.

Hope this helps!

answered Feb 15 '18 at 00:41

johnwick0831

918
1
12
24

I would avoid using arrow functions within classes as they don't go on the prototype therefore when you instantiate multiple components they get their own functions rather than inheriting them. Instead bind the "this" of the functions in the constructor. jsperf tests show that binding functions is 10-15% faster than using arrow functions – Shanon Jackson Feb 15 '18 at 00:44
I appreciate that you want to help but as you mentioned there are much more detailed answers out there. The thing is, methods are "bound" to classes but once you pass a method reference to a handler such as `onClick` or any function expecting a callback, you *lose* that context. When you pass `this.test` to onClick, the `this` is there, providing context. But once it gets into the event handler, it no longer has that, it's just referred to by the argument without the `this`. – Andrew Li Feb 15 '18 at 00:45
Also remember arrow functions behave slightly differently than normal function expressions when it comes to ```this``` more information here: http://exploringjs.com/es6/ch_arrow-functions.html – Varinder Feb 15 '18 at 00:46
FWIW Arrow methods don't "bind" anything. Arrow functions don't bind `arguments` or `this`. It just so happens `this` takes the value of the `this` in the surrounding scope in an arrow function. Since the surrounding class' `this` refers to the instance, an arrow function property works. Also note class properties is still in the staging process of ECMAScript. – Andrew Li Feb 15 '18 at 00:49
@Li357 thanks for the explanation! – johnwick0831 Feb 15 '18 at 04:41

React method binding explained

1 Answers1