This course has been updated! We now recommend you take the Complete Intro to React, v8 course.
Transcript from the "Context with Hooks" Lesson
[00:00:00]
>> Brian Holt: So I want you now to go to SearchParams.js,
>> Brian Holt: And we're gonna make all the buttons use our ThemeContext. So at the top here, I want you to import ThemeContext from './ThemeContext'.
>> Brian Holt: And we're also gonna get another hook from React called useContext.
>> Brian Holt: Okay, and then up here underneath pets, we're gonna say const Theme.
[00:00:44] And keep in mind that this also comes with a setTheme as well. But we're not gonna use the setTheme, so I'm just not gonna grab it. So const [theme] = useContext
>> Brian Holt: (ThemeContext).
>> Brian Holt: So again, ThemeContext could be anything. This could be an object, it doesn't necessarily have to be an array or a hook or anything like that.
[00:01:10] They're just convenient to use with each other, but they are more flexible than that.
>> Brian Holt: So now, I have this theme, which is available to use, so I'm gonna go down to my button.
>> Brian Holt: Here, at this Submit button, I'm gonna say style = and just do some inline CSS like a professional.
[00:01:38] [LAUGH] Just kidding, don't do this.
>> Brian Holt: So typically, you would expect this to be color: blank or something like that, right? React makes it a little bit easier, that you can just keep it an object. So I'm just gonna say color: theme like that. Now notice there are two curly braces next to each other, but notice they're colored differently, that's because this is an object, right?
[00:02:05] And this is the JavaScript expression from JSX thing. So it's not that two curly braces next to each other have any sort of special meaning in JSX. That just happens to be how that looks.
>> Brian Holt: Okay, so, now if you go over and look at our project. Sorry, you don't want color, you want background color.
[00:02:33] I mean notice it still worked, right? The color of this is blue, but that's not what I intended. I intended this to be backgroundColor.
>> Brian Holt: And there you go, now it's dark blue.
>> Brian Holt: Let's talk about, I mean, obviously this was a lot of ritual to get very little benefit out of it, but let's talk about why this was important.
[00:02:58] I have App.js here on the top, right, which I've wrapped in this theme provider. And then inside of SearchParams, notice I haven't passed anything into SearchParams. Typically, you would have had to do something like themeColor = {theme}, right? And you'd have to do the same thing with details and pass it into every individual piece of your application that read from the theme, right?
[00:03:22] That's burdensome, right? You get to a certain point where it gets more burdensome than it's useful, right? So that's where these contexts are super useful. That instead of having to pass this explicitly into SearchParams, now I can go into SearchParams. SearchParams, and I can read off of the context.
[00:03:47] Now I could have infinite layers between me and the provider and it still works, right? It just happens to be that it's the immediate parent that has a provider but there could be 17 layers. And actually, if you look at the reach router code inside of your Explorer, let's actually just look at that right now, Inspect Element.
[00:04:11] React, they use context everywhere.
>> Brian Holt: So you can see there are context provider for ref, context consumer. They have a bunch of stuff in here, context consumer, context consumer, context provider. There's a bunch of layers of consumers and providers. That all has to do with context.
>> Brian Holt: So it's really easy to use with useContext, which is a hook, right?
[00:04:49]
>> Brian Holt: Before we move on to how to deal with classes, does anyone have any questions about what you've seen so far?
>> Speaker 2: So to use the useContext, the context provider has to be a parent?
>> Brian Holt: Yep.