This course still contains valuable patterns in React, but doesn't cover React Hooks introduced in React 1.16.
Transcript from the "Control Props Primer Solution" Lesson
[00:00:00]
>> Kent C. Dodds: All righty, so let's get this primer going. Switch over to exercises, npm t to run the tests. And.
>> Kent C. Dodds: Yeah, there are a couple of things that we need. So the first thing, I need to determine whether or not my state is controlled. So specifically my on state.
[00:00:22] So we can isOnControlled. And because I'm going to be the one calling it, I'm not passing as a callback or anything. I can make this a regular method. I don't have to do the whole arrow function thing. So, regular old method. And I'll return this.props. Well, here, I kinda gave you the answer right there.
[00:00:42] That's what Money Bag Marty is all about is the answers. So then we'll add a getState function and this will return an object. And that has the on property, is this.isOnControlled, so if it is controlled, where will you get it?
>> off screen male: Props.
>> Kent C. Dodds: Props. Otherwise, this.state.on. Great. So we got those two taken care of.
[00:01:17] And then in our toggle, if, actually here, before we do that let's update down here. Instead of, actually pretty much everywhere we'll use this.state we're gonna wanna use this. Except for where we're actually at. Okay, just be these two places, this.getState.
>> Kent C. Dodds: Cuz now they can come from either place.
[00:01:42] Okay, cool. So then, if this.isControlled or isOnControlled then we're simply going to call this with our suggestion. So we're saying, hey, if it were me, I would update it like this. Our suggestion is to update it to be the inverse of what it currently is. Otherwise, I'm gonna manage it myself and update my own state.
[00:02:16]
>> Kent C. Dodds: And that gets our test passing. Okay, so that's control props. I'm not sure exactly how the input component in React is implemented. But I'd like to imagine or dream or make up that it works like this. [LAUGH] Something like this, anyway. So what questions do you have about this pattern?
[00:02:40]
>> Kent C. Dodds: This is actually a very common pattern. It's been. Yeah, people. I mean, this is beginning of React stuff. Definitely useful stuff.
>> Kent C. Dodds: So in some ways, it's actually similar to state initializers, because you could actually use this to not only control but initialize state. And then you just on change, or in this case, on toggle, you just keep the parent state updated.
[00:03:11] And so combining this with state initializers is good because it allows people to either initialize it or entirely control it.
>> Kent C. Dodds: Okay, cool. So let's go ahead and jump into the elaboration. So Marios online is saying, why don't we use componentWillReceiveProps for this and update state in there accordingly?
[00:03:37] I'm actually glad that he asked, he or she asked that. So that is actually called synchronizing state. Sychronizing state with props. So componentWillReceiveProps. And you say, like if the next props has the on property, then this.setState on is whatever that value is. So that would simplify some things but complicate others.
[00:04:07] Because now you have two sources of truth in your component. And it becomes a little harder to maintain. So in general, it's, yeah, it's just make things a lot easier. In addition, this is actually a deprecated method. [LAUGH] So, you could use getDerivedStateFromProps and actually you could implement these with that as well, the new replacement for this use case.
[00:04:34] But I've found that it's a lot simpler to just have a single source of truth for where your state is coming from and it makes the rest of the implementation simpler. Hopefully that answers the question.
>> Kent C. Dodds: Okay, cool. So yeah, one person, please tell me what you learned.
[00:05:04]
>> off screen male: I learned that if the [LAUGH] you can't just do a simple Boolean check on this prop set on if it is uncontrolled.
>> Kent C. Dodds: Okay.
>> off screen male: Cuz then it'll set to false.
>> Kent C. Dodds: Yes.
>> off screen male: So we need to explicitly check for undefined.
>> Kent C. Dodds: Yeah, yeah. So yeah, you wanna check for undefined.
[00:05:17] You might also do like null, like maybe null means I don't wanna control it. But I actually like people being able to control it with null, so. But yeah, good, good point. Okay, that was one. So thanks. You get a high five.