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

Brian walks through implementing the ability to set the button color theme with an HTML drop-down selector.

Get Unlimited Access Now

Transcript from the "Context & State" Lesson

[00:00:00]
>> So now, let's go make it, we used a hook on purpose so that we can set it later, right? So let's go into SearchParams, and we're gonna make it settable. So in Details, We are going to do grab the setTheme out of here now, not Details, we're in SearchParams.

[00:00:29] Up here at the top, grab setTheme out of here as well. And then we're gonna make an HTML dropdown. So put this one just underneath breed here. We put a label htmlFor="theme". It's gonna be called Theme. It's gonna be a select. Value = theme, onChange = e, and we're gonna call setTheme with e.target.value.

[00:01:23] And we're gonna do onBlur as well. And then you can put, I don't know, four or five options in here. I had value="peru", which is my favorite CSS color. Here, you can put darkblue cuz that's what we had, darkblue. chartreuse, that's everyone's favorite color, right? And mediumorchid, it's another greatly named color.

[00:02:11] There's some truly ridiculous CSS names Okay, so now, we should have an HTML dropdown of various different colors that we can do. And I mean, the world's your oyster here if you wanted to do #333 of a, you were saying before fog dog, right? Kind of, have fun with it.

[00:02:53] So now, we can go back to the homepage. We now have a theme drop down here, right? I was right, it is orange Fog Dog. Medium Orchid, Chartreuse, Peru, Dark Blue, all various CSS colors. So notice that this one's changing. But what would you expect if I go over to the adopt page?

[00:03:17] Notice that this button stays the same color, all right? So if I go back to the theme perotta here. Now, think about this for a second. Let's say I just kept track of this as local state to the SearchParams page. If I navigate it to Details, so it totally unmounts the SearchParams page, and totally mounts the Details page.

[00:03:53] And then I went back to the SearchParams page. It would blow away that state, right, because it's totally unmounting. So all the state gets blown away when it gets removed from the Dom, right? But because we're keeping track of this at the app level, right? When does app.js ever get unmounted?

[00:04:11] Never, it's never unmounted, it's always mounted, right? We never changed this, which is where it gets rendered. So therefore, this state never goes away. This is always valid state, whereas every time that I go from Details to SearchParams, any state that I had in Details is gone, and it's gone forever, right?

[00:04:33] So this is kind of a useful way to have long lips state as well. That's another good reason to use context. And this is a very silly use case for context. But it was fun, cuz is it good to have multiple context or is it good to just jam everything into a Redux-like store of context?

[00:05:03] It depends, having just an entire context for just the theme of your button, probably a bit on the silly side in terms of you could probably do a bit more with it. I would have one store for all of my theme-related information. So that could be, I don't know, colors, names, maybe it's internationalization strings.

[00:05:29] I don't know, everything that's kinda related to that probably shove into one thing. But I tried to have data stores for like data. That's maybe a good way of putting it. There's a balance between way too small and having 10 trillion contexts, or way too big that you've basically recreated Redux, right?

[00:05:53] Kinda gotta balance it there, yeah.
>> I might have just missed something, but when we were establishing the hook for theme context, sorry, excuse me, for Theme and setTheme on SearchParams.js. I was thinking that you had said, yeah, so setTheme there. I was thinking that you had said, we didn't need to include that.

[00:06:19] And I missed why exactly it is required after all. I'm also curious, for example, why is it highlighted blue instead of yellow? What's the difference there, and how are you using this?
>> Well, let's start with why we included it. So when we were just reading off of it, and were not doing any sort of setting, so the first step that we did here, that's when we only included a theme.

[00:06:45] But as soon as we started doing setTheme down here, then we had to go include it. SetTheme, okay? Are you asking why this one is set to blue instead of yellow like the rest of these?
>> Yeah, [INAUDIBLE].
>> It's probably something to do with the typing cuz this is a React.Dispatch, which you can get.

[00:07:15] This is what I was telling you that this will include types now, right? So even though that we're not using TypeScript, this actually is using TypeScript to figure out what the types are. So if I went into, I'll not use breed this, into ThemeContext, and I just delete this.

[00:07:35] If I go back to SearchParams here, now, it's gonna say this is any, and I don't know what it is, right? So, I was answering a different question, that's why we do that. The way that you would get that to actually be correct is that we'd actually have to be in TypeScript, right?

[00:07:58] And we would have to say that this is a React.Dispatch. And my guess is the way that the language server works is that if it has a specific type, it does that, and it shows it as a different color, but it depends on the theme first of all.

[00:08:11] And secondly, the language server and how it gets tagged. That's probably way more in depth than you wanted to know about it, but I think that's why. It's probably because it's a function, Whereas this is a type thing. Anyway, I don't know.