This course has been updated! We now recommend you take the Complete Intro to React, v8 course.
Transcript from the "Context" Lesson
[00:00:00]
>> Let's talk about context. So when I used to teach this class forever and ever go, people get really mad at me that I would not teach this thing called react context. And the reason being is this was not an official API until react, 16, so they standardize it in version 16, and they took it from a really kind of finicky bad API, in my opinion.
[00:00:27] The old context API and they made it like official, and it's actually quite nice to use, now particularly with hooks it works really well. So what is context? Everything that I've been showing you so far, is basically one way data flow, right? You have a component that has state in it, sometimes you'll pass that state down into a child component which can read it from props.
[00:00:50] Which can pass it down as this very obvious data flows down, and does not flow up. That's very intentional that because it makes it very easy to follow your code, the data only goes in one direction. What if you have to have data that goes on the other direction?
[00:01:04] Sometimes you just have constraints that require that, or a different way of stating that. Is what happens you have state that affects your entire application all at once, all the same time? A good example that might be something like a user, right? If I'm a user on your website, I'm a user on netflix.com, and I navigate to 10 different parts of the app.
[00:01:28] My users important on every single page of that application, right? If I'm logged in, what my plan is? Sometimes maybe like what your password is? All those kinds of things can affect all the various different parts of the application, so you can see that's like app level state.
[00:01:45] So on our Adopt Me page, if I was logged in, right? That would affect this page, it would affect the details page, it would affect all that kind of stuff, you can get rid of that error by the way. On details. Yeah, there you go, that's all working again.
[00:02:06] So, what if you have app level state? This is where something like context comes into the picture, where context can be very helpful. It can help you kind of keep state that affects your entire application. So, I'm gonna show you one of the ways that you might do this, for something like a theme, right?
[00:02:26] So maybe you have like a dark mode and light mode, that would be something you'd keep in context. You wouldn't wanna just be passing that down into every single component. Otherwise, you'd end up with this problem of base, and this we used to do this to be honest with you.
[00:02:39] You'd be like in app, let's say I had a theme of like some theme color. I'd have like const themecolor = brown or something like that, I don't know why I thought Brown was like the worst theme color, but here we are. And you'd have to pass theme into every component and then, that would have to pass it down into every other component, right?
[00:03:03] This is called the prop drilling problem, that the props have to drill down into every single component. And it gets very tedious to pass theme into every component in your application. This is what context is useful for, because you can set it once at the application level. And then, every component that needs to know about the theme can read from it, does that make sense?
[00:03:27] All right, cool, so we gonna make a theme for the buttons in our application, cuz I was out of ideas at that point. [LAUGH] So what happens, if I wanna have some sort of theme where I can change the color of this button? And go in here, and I can change the color of this button?
[00:03:43] Now, I could make it so that my app had a theme and then, I could pass that into both routes. But, let's see how to do it with context. Okay, The other thing I'm gonna say about context is, it basically for 95% of the reasons we used to use Redux for.
[00:04:07] Context is now a better choice, I almost never use Redux anymore. Redux is great, by the way, it has a lot of really cool features about it, and an intermediate, I just a little section on Redux. So I show you how to use Redux? And there's very specific use cases for it now, but 95, 99% of reasons you would use Redux, you would now use this context.