 It's day 24. You made it. This is the last actual episode before we kind of wrap things up and whatever. This is the last one where I'm going to actually show you something and I'm going to show you a lot today. We have to fit in all of Create Context into this episode. So let's dive into it. Now, Create, sorry, Use Context is one of the last hooks that is really going to be very important for you as a React developer and as you explore hooks. Now, where that comes into play, and I apologize for the nose and the sniffles. I am very sick right now. And you'll probably notice as I make a bunch of mistakes. But where this comes into play is this. We have this width. We're using our custom hook for Use Width. And while we're seeing this detail page with the width, which is where we want it on this detail page, so we can kind of change the layout based on the width, it's actually not part of that detail page, right? Like this is just being rendered above in our app. So if we were to take that window width, and we were to put it inside of our Pokemon detail. So let me just show you this is the detail component that we created. Well, that blows up because this component doesn't know about width. It's in that outer scope, but like it doesn't know anything inside. So it kind of puts us in a weird spot, like do we add a width, if I can get in there, a width prop. That seems really weird. Because if we have this Pokemon detail, and while it does want to be aware of the width of the screen, it seems really weird to have to pass that down as a prop. That seems like very global information. Now, we could, you know, bind our use effect, or sorry, our use window width effect in that other component. And that would actually be great. But then we would, if we had like other views, they're all kind of like adding their own event listeners for the thing that might not actually be problematic. But, you know, I wouldn't have a chance to talk to you about context. So we're going to use context for it. So let's do that. First of all, we need to make a new file. So this is going to be window width, oops, rename, window width context.js. Okay, that's going to import, let's see, import create context, a new function from react. So on the react object is this, or on the react module is this named export called create context. So we're going to use that. And we're going to create a context. We do that simply by calling it as a function. We'll assign that to window width context. And export it as the default export. Let's see. Obviously I did not spell something right. There we go. Finally. Okay. So we have now a window width context. So this module is actually done. In our application, we're going to import that now. Import window width context from that path, window width context. Now, every context has a provider and a consumer component. They're part of an object. Okay. So what we can do now is use the window width context provider, dot provider using that property access syntax. So we can just use that dot right here in JSX. And we'll use, we'll set value. Now value is a prop on every provider. And we're going to set that as width. We'll go to the bottom and close that up. And obviously I closed that at the top, which was not right. Okay, cool. We save that. And now we are setting context. So we're putting width on the value of this context provider. That's great. So we again, imported window width context. And we're using it to provide the value width to everything in this scope of components. Now, if we had more components like outside, they wouldn't have access to it. But anything here is going to have access to that. So let's go into our Pokemon detail component and catch that context. So now what we're going to do is we're going to use the effect use, or the hook, sorry, use context, sick brain, sorry, use context. We're also going to import our context from the window width context file. So window width context from window width context. Okay, we're going to save that. Now we have a window width context here with a provider and a consumer. Now in our app, we're going to use, use context. So let and we will use it like this. So use context. And we give it our window width context. Okay, that means that it's going to look for a context that is provided from the window width provider. Okay, and let's assign that to a value. So width equals use context of window width context. Now, as you can see, everything started working again. This line window width is width is part of our Pokemon detail. We didn't have to pass that down as a prop, you know, which would have been weird because it's totally unrelated to this. So now we can move it around inside of this, we could use this in other parts of our application that, you know, using this window with context and everything is awesome. And that's about all I got in me for this lesson. So explore context, make another context and kind of make another module for that and play around with how you might use that in your app.