Check out a free preview of the full Complete Intro to React, v6 course:
The "Context" Lesson is part of the full, Complete Intro to React, v6 course featured in this preview video. Here's what you'd learn in this lesson:

Brian discusses context which is similar to state, but instead of being confined to a component, context is global to the application. Context is useful for storing data that many components would want to access like user profile information or theme preferences.

Get Unlimited Access Now

Transcript from the "Context" Lesson

[00:00:00]
>> So we are heading back to hooks, we spent a bunch of time on class components. And let's go back to using some hooks now. And let's talk about context. Now historically, in this class, I haven't talked about context, because prior to react 16 context was kind of like this unofficial API that worked fairly well but like was kinda hard to use.

[00:00:23] We had other things like Redux that kind of did it as well or better. But with context, they kind of refigured it out and it got a lot better. So now I'm actually happy to teach you this. It's useful occasionally. It's a it's a sledgehammer, so don't use it all the time.

[00:00:39] You'll muddy up your code base and make things less Obvious which is the, React's big advantage here is that the codes very obvious when you read it, like this does this, this does this. It's very easy to like read sequentially. Context adds indirection to that, right? So it adds like, okay, something's happening here, but it actually occurred all the way over here.

[00:00:59] That's occasionally useful, and I'll show in a second exactly what I mean. But just be aware that it's not something you want to use all the time. So let's pretend that we have a theme, and this could be for something like Dark Mode, right? So let's say you wanted to implement Dark Mode on your In your application, and you actually needed to like physically move components around if dark mode was engaged or something like that.

[00:01:25] Not typically the case, but we're going to use that as our example. If you have dark mode, it affects more than just like one component. It affects every component in your application, right? It's just like universal global state for your application. And then that's where context is very useful.

[00:01:41] Let's say like a user logs in, you're probably going to store the your user information in context. Because basically every component in your application probably needs to know Something about the user. But let's say let's talk about like here with like Luna. I don't need to know what active picture is in context, right?

[00:02:02] That's, that's great to live just in the component. So that's when you only use context when it's on global state. That's what I want to get out. Even then not always. But let's get into it and then I'll let you make your own judgments here. So let's make a new file called theme context ThemeContext.js.

[00:02:24] It's gonna be very short. Import create context from. To react const theme context equals create context.Block like that, and then export default theme context. Now, typically this is enough. Typically you don't need anything more than what I've shown you here. You can provide and you should probably provide a default value here for contacts that kind of looks like hooks in that capacity.

[00:03:04] So I could say like green here or something like Like that, this would be like the default value if you created a theme context without giving it anything which you should basically never do. The other thing is if you provided a value here, TypeScript can read it automatically, and type your context for you.

[00:03:20] So in other words you should just do this. So the default value that we're going to give it is actually going to be a hook. We're going to use context and hooks together. So I'm gonna say createContext with green, and a function, That's just gonna be an empty function.

[00:03:38] You can also just put function here. Now, the reason why we're doing it this way is This is just a default value that we never expect to actually call. But we wanna just signify the TypeScript basically, I'm basically only doing this for TypeScript. This is gonna be a function.

[00:04:01] And I've seen people put like function dot prototype here as well. Don't do that. I think that's weird. Just do an empty function. I think I haven't made notes like that. So that's because the second thing in a hook is always a function. That's why we do that.

[00:04:19] The second thing and use state specifically is always a function. All right, so let's go to app.js And here we're going to import, Theme context from that slash theme context. Then at the top of the hour, we also have to import use state. From react, I'm gonna say const useState.

[00:04:59] Not useState, const theme = useState. And we're gonna start with dark blue, but pick your favorite CSS color. Mine's not dark blue, but that's what I have my notes for. We're gonna stick with it. Okay. Now remember eustache gives you back like theme and set theme, but I'm in Purposely putting this is just like one thing.

[00:05:30] You can even call this like theme hook if you wanna be more clear. You might not say to have it just as theme. So we're gonna do that. So wrap your app here. We're going to call this ThemeContext.Provider. And we're going to say the value is equal to theme.

[00:06:00] And this is going to be a React component that wraps our entire application. So what is this? This is basically the same like everything inside of this. So in our case, our entire application is now wrapped in a provider. So now everything inside of this can access this context.

[00:06:30] So now anything inside of like everything down to details and carousel and error boundary, all those components can say, Hey, what's my theme at the moment, right? So that's giving. That's the theme available available everywhere. Otherwise why would I have to do, I'd have to say, well I guess details, you need theme.

[00:06:49] Some one say is theme equals theme and you just be passing these theme properties from component to component to component to component, right? Let's say you wanted to use it inside of carousel I have to be theme to theme then I have to go inside In details. D cells that have to pass that into carousel, right?

[00:07:05] This is called prop drilling we have to prop pass it from parent to child, parent to child parent to child until it eventually get to the place that you want to. That's kind of one of the things that context psalteries the prop drilling problem of passing these along too frequently.