This course still contains valuable patterns in React, but doesn't cover React Hooks introduced in React 1.16.
Transcript from the "Provider Pattern & Exercise" Lesson
[00:00:00]
>> Kent: Let us move on to the provider pattern. So, yeah, we've just got about an hour or so left. And we've got, yeah, about an hour's worth of material, I think. Maybe a little bit more. But we're doing pretty well on time. So the provider pattern is pretty handy.
[00:00:19] So let's go ahead and take a look at this. You'll see that the exercise itself is very different from what we've had before. Now it's like in a little, tiny app where you can swap between emoji and text. So that's fun. So let's see how this is accomplished really quick.
[00:00:40] We've got our app usage right here. And this is a toggle, sorry. So this is the final version, the API you want to implement. Let me see, I think I actually I have a Y version which I think will be better at explaining why this actually matters. So, sorry, taking a step back, and forget that example for just a second.
[00:01:10] So we've got this simple toggle component, and it's using render props. And here in our usage, we're applying that render prop. And we're forwarding on those properties to Layer1. So totally contrived. And then that Layer1 component is forwarding those props on to Layer2. So Layer1 doesn't actually care about those props at all.
[00:01:33] Totally irrelevant to Layer1. Layer2 does care about one of them. But it doesn't care about on toggle. It's totally irrelevant, so it's gonna just forward that on to Layer3, which also doesn't care about those props. And forwards that on to Layer4. So the only reason that this toggle prop needs to be threaded through all of these components is because the leaf node of this React tree needs that toggle prop.
[00:01:58] How many people know what this is called, what this problem is called? What is it?
>> Speaker 2: Props drilling.
>> Kent: Prop drilling. Yeah. I like the imagery, because that is exactly what it is. And it's a real pain. Because what if I decided I want to change this from toggle to anything else?
[00:02:16] Okay, well, now I gotta go update all over the place. And we've got too many of the word toggle in this little thing anyway, so good luck find and replace. So yeah, that's a nightmare. If I wanna make something reusable, and move it somewhere else. What happens is, like let's say, we don't need this switch anymore.
[00:02:35] So I'll just get rid of that. And now this thing is gonna render null or something. Well, now you have to remember, okay, so I don't need the toggle here, I don't need the toggle herre. So you have to go. And what winds up happening is you just like, okay, the heck with it, I'm just gonna spread all the props everywhere I go.
[00:02:51] And now you're passing props where they're not needed. It makes things harder to maintain. So the prop drilling problem. I don't think I have to convince too many of you that it's really annoying and frustrating. And that's what the provider pattern solves for us, is the prop drilling problem.
[00:03:09] So, yeah,
>> Kent: So the provider pattern actually was a little tricky to implement until the new context API came out. Now it's significantly easier. So you've actually already implemented the provider pattern. You did it with your compound components. And the difference is that you didn't expose a consumer for people to actually use it themselves.
[00:03:35] And so that's what we're gonna do here. There's not a ton of stuff that you have to do in the exercises themselves. You create a toggle context. We're gonna expose a consumer like I said earlier today. And then you need to include all of the state and helpers need to live inside your state.
[00:03:58] And so we're gonna put it in initial state, which is what state gets set to. And yeah, I'm pretty sure that's like pretty much it. So, and there's a bonus. [NOISE] So you can actually implement the provider pattern and render props in a single component. So people could continue to use this as the simple component that it already is, or they could expound on it and use it as a render prop.
[00:04:27] And I'm pretty sure I've got a test in here. That you can enable if you want to so venture. Yeah, you don't enable it. It just won't throw an error if you don't want to do that, so.