This course has been updated! We now recommend you take the Complete Intro to React, v8 course.
Transcript from the "React Context" Lesson
[00:00:00]
>> Brian Holt: Let's talk about what context is. In the first versions of this course I didn't teach context at all, because it used to be an unstable API. With version four of this course it landed as a stable API and so it's actually now something that you might want to use sometimes.
[00:00:18] So, let's talk about why it could potentially be useful. Sometimes you'll have like global applications state and a really good example of this would be something like user log in information. So, maybe you are in Netflix.com and as a user navigates from route to route to route, every single page is gonna use pieces of that user's data.
[00:00:35] You should display the email here, you show them their user preferences over here, you show them all this information that you would get from the user logging in. Right now with all the tools that I've shown you, what you would do is you'd put all the information into app dot JS and you would just pass it into every single child.
[00:00:50] Then, you would kind of have this problem we would call prop drilling where you would have to take the property from the parent, pass it into the child, take the property from the parent, pass it into the child. So on and so forth down multiple levels, it's annoying.
[00:01:03] It's also useful because you can see the flow of data through your application, but it's annoying to have to do it everywhere for something like user data, because every part of your application is going to touch your user data. You kind of get where this is the problem?
[00:01:16] Where we have been solving that is using redux, historically. Redux is typically you have this data store on the side and you feed all the information into the data store and then every part of your application can read from the redux store. Redux is hard. We'll actually go over it in intermediate React, but it's hard and often overkill for these sort of things.
[00:01:39] There's another thing that's new to React called Context that you can use, that you can load these into basically a data store that your entire React application can use and update. But just know that's kind of a double edged sword, right? You're taking out the advantage of React of being explicit, and now everything kind of has implicit dependencies, right?
[00:02:00] It's hard. So let's,
>> Brian Holt: Let's go take a look at how you do that.
>> Brian Holt: So I want you to make a new file here and I want you to call it ThemeContext.js.
>> Brian Holt: Okay, gonna be short and sweet here. We're gonna make a theme for our application.
[00:02:30] So import, create context, from react.
>> Brian Holt: I'm gonna say const ThemeContext = React.createContext and we're gonna give it a hook-like shape, because we're actually going to stick a hook inside of here. But just so you know, you can stick anything in context. It can be an object, it can be function, it can be a string, a number, whatever you want.
[00:03:01] But we're actually going to literally stick a hook in there. So, we're gonna put green, or whatever your favorite CSS name color is, and a function.
>> Brian Holt: Now, why did I get this empty function? This is actually a placeholder, so it will use this particular function if it has no provider above it but this should never happen.
[00:03:26] So this is actually more just notes for your future self. This is what this looks like and this is what a hook looks like. It has the state and it has an updater. In this case, the updater doesn't do anything, so we just give it an empty function.
[00:03:42]
>> Brian Holt: Make sense? And we don't want React.createContext. We just want createContext like that.
>> Brian Holt: Okay, and then down here at the bottom, just export default ThemeContext.
>> Brian Holt: So now we've created the context, now we're gonna go use it inside of our app.js. Okay? Instead of app.js we want you to import themeContext from /themeContext.
[00:04:21] Here inside of app we're going to create, we also need use state from react. So get use state from up here. Use state.
>> Brian Holt: And we're gonna say,
>> Brian Holt: Const themeHook = useState. And we have to give it some default values. So just to show that the default value is different, I'm gonna put dark blue in here.
[00:04:51]
>> Brian Holt: Now remember we normally have been doing,
>> Brian Holt: color and setColor here. Like this right here with hooks if you remember from earlier in the course. But right now we're just gonna grab the whole array and call it themeHook.
>> Brian Holt: And then I'm gonna wrap everything inside of here, inside of StrictMode here.
[00:05:16] ThemeContext and then you say value = themeHook.
>> Brian Holt: So now what we've done here, sorry, you have to do ThemeContext on both of these .Provider, .Provider. Yeah.
>> Brian Holt: So on line 22 and line 12 there introduce Themecontext.provider,
>> Brian Holt: So what we've done here is now everything inside of here has available as a global app state this themeHook.
[00:06:12]
>> Brian Holt: Now, I could have two different theme hook providers where they can have search params and details have different providers. And they could have these value be different things. So there's actually a lot of flexibility that you can do with context and I just never use it. So, the only thing that I find useful is providing like the entire application with a global application state but there is some fanciness that you can do.