This course has been updated! We now recommend you take the Complete Intro to React, v8 course.

Check out a free preview of the full Complete Introduction to React (feat. Redux and React Router) course:
The "Auto-Binding" Lesson is part of the full, Complete Introduction to React (feat. Redux and React Router) course featured in this preview video. Here's what you'd learn in this lesson:

Brian spends a few minutes revisiting the ES6 class syntax that can be used to create React components. He discusses the need to manually create bindings when that syntax is used. With React.createClass, method bindings are automatically initialized.

Get Unlimited Access Now

Transcript from the "Auto-Binding" Lesson

>> [MUSIC]

>> Brian: So I'm gonna give you one more aside about class versus create class. Notice that we didn't have to do any binding here like this .handle search term and then the this here is the correct context that refers to search. That's free in react.createclass because they do what's auto binding for you.

[00:00:24] Basically they go through and bind all of your methods to have the search, right, whatever the component is as the context, so that whenever you call this inside of the method, it just automatically gets the right context. The class syntax does not do that for you, you actually have to explicitly bind it.

[00:00:44] So if I was to rewrite this in terms of like the create class space so if I said class search extends react.component, what you're going to end up seeing a lot of is here in the constructor props. First of all you have to call super props because you have to pass it up to the react component that's just the way that is.

[00:01:07] But then you have to say like this.handle search for event equals this.handle search term event.bind this. And you do that for every single method that you create inside of your react component. It's just a little annoying, right? Because this binding is always the same right and it was nice here in the create class that we didn't have to do that.

[00:01:32] So anyway, that's just the way it is. [LAUGH] Yeah.
>> Speaker 2: Is there some benefit to using the class syntax? Because that looks awful.
>> Brian: [LAUGH] I think the benefit here is that react is trying to be as unobtrusive as possible to draw within the lines of JavaScript, right.

[00:01:54] And rather than create a class, we're literally, there's a class construct inside of JavaScript and yet we are creating our own way of creating classes. So we're kind of drawing outside the lines of JavaScript and so their idea with the class is like let's be as JavaScript-y as possible.

[00:02:14] That's the basic gist. There's more work to doing it the class way. I do it both ways you can mix and match too. There's no, like one app doesn't have to have just one right. We're already mixing matching create class and stateless functional components so yeah whatever works for you.

[00:02:32] Yeah.
>> Speaker 3: Someone noticed when we broke the initially, when we broke the input to the counselor was seeing that they recommend using default value. When would that be useful?
>> Brian: Yeah, so there's a concept of tracked vs untracked inputs. So if I don't, let's just recreate what the person's seeing.

[00:02:57] if I take off this On Change event. It's gonna yell at me cuz I have, whatever I don't care. Refresh and it's going to yell at me in the consuls as you give a value and when you give it a value it's like locked at that point without an On Change.

[00:03:16] So what they're saying is like what you can do instead is say default value and now if I refresh it. Its gonna, now it actually works but like nothing inside of react is actually tracking that, right? So that's the trade off you're making here. So if you don't actually care about the input of that value or the value of that input which I'm not sure why you would ever have that situation that you can do that.

[00:03:45] IE, you're always going to do it this way, that you're going to have a value and an on change. I guess the place that you might not use that is if you're integrating with a jQuery library or something like that maybe, and you're passing something in and then you're waiting for responses back from it.

[00:04:03] But that would be pretty exceptional that you're in usually not to do that. IE i like I've never had to do that personally.
>> Speaker 3: And then somebody else asked, they're seeing a lot more usage of class than create class, how does Netflix approach it?
>> Brian: We have we have mixed and matched.

[00:04:21] It's whatever the engineer feels like doing that day. It's mostly create class, however, I'm told that Facebook it's almost all class so, up to you. The idea is that they were they were going to deprecate create class and there was just great riots and people died and stuff like that.

[00:04:41] Just kidding I don't know. But a lot of people prefer create class. I think it's an easier thing to teach because you have to worry about context. It just works. But that's up to you whatever you feel like doing.
>> Speaker 3: What about using decorators like core decorators?
>> Brian: They're awesome.

[00:05:00] And I really don't want to talk about them. Definitely an advanced use case.
>> Speaker 3: And then are you a fan of the ES7 syntax for .bind this?
>> Brian: The colon colon one? Is that the one they're talking about?
>> Speaker 3: Yes, sorry, yes.
>> Brian: One, it's not ES7. ES7's already shipped and does not contain colon colon, so it's ES future.

[00:05:23] It's interesting. I'm not opposed to it. Now you're gonna ask me what it is and I can't, I don't remember off the top of my head exactly how to do it. And I think the basic gist of it is like.
>> Brian: Excuse me. Is I call a method like the stop method, correct me if I'm wrong.

[00:05:45] Like colon colon search right? And I'm providing it the context to call it with. I've got to remember. That might not be right either, but it's basically a way of dynamically modifying the context. And the other reason I don't want to talk about decorators, like it's a good question and there's, they are really interesting, but they're like stage zero or stage one in terms of making it into JavaScript.

[00:06:10] And thus, they may make it in, they may not make it in, and it's gonna be a while before we see them. But the basic idea is like, you can say like at auth or something like that. And now maybe like this particular route would only ever show if it was like if the person was authorized to see it, like had credentials to see it.

[00:06:33] If you ever worked in Python you'll see these everywhere. Those my make it in JavaScript, I think they're really cool. But we don't have them yet. And we're kind of far away from it so they're experimental features.