Complete Intro to React, v5 Persisting State with Context Hooks

Transcript from the "Persisting State with Context Hooks" Lesson

[00:00:00]
>> Brian Holt: So I got one more thing I wanna show you here. And I wanna show you how to update the the theme, right? So far, I've just shown you how to read from the theme, but we also wanna be able to update the theme. So I want you to go back to SearchParams as well, SearchParams.

[00:00:19] We're going to make another Dropdown, underneath BreedDropdown here. We're gonna say label htmlFor= location.
>> Brian Holt: Sorry, not location but theme rather.
>> Brian Holt: And we're gonna have a Theme there, and we're gonna have a select. And the value is going to equal theme. And onChange, we're going to set the theme, so setTheme to be e.target.value, and same thing for onBlur.

[00:01:16]
>> Brian Holt: So let's go grab setTheme here, cuz up here at the top, we have theme, and we're not grabbing setTheme. So all I have to put here is setTheme to grab that out of the ThemeContext. Cuz again, this is just a hook, right? It's a normal hook, but the hook lives in-app.

[00:01:33] It doesn't actually live in SearchParams.
>> Brian Holt: Okay, and then we have the select here.
>> Brian Holt: And then here, we're just gonna give a couple of options. So here's ones that I gave, peru, cuz that's such a lovely color,
>> Brian Holt: darkblue,
>> Brian Holt: darkblue,
>> Brian Holt: mediumorchid, cuz that's a color.

[00:02:18]
>> Brian Holt: Or what's another good one? What do I have here? chartreuse, that's a color.
>> Brian Holt: Now, a lot people will probably wonder why don't we just use Dropdown again, this looks like a Dropdown. The reason why we're not using Dropdown is cuz Dropdown creates its own hooks, right?

[00:02:40] And we're actually using someone else's hook. We're using apps hooks, we're not using SearchParams hooks. So that's why we're not gonna use our use Dropdown hook here.
>> Brian Holt: Okay, is that working?
>> Brian Holt: That should be good. Let's go take a look and see if it works. So now I have a new Dropdown here with Theme.

[00:03:18] If I change this to be Medium Orchid, right, that's a nice Medium Orchid I suppose, or Chartreuse, or Peru. But here is the interesting part of this. If this was just a normal hook, as soon as I navigated to the details page, I'll leave the code up here while I'm explaining this.

[00:03:36] As soon as I navigated to the details page, right, it would drop that, right? Because the component would get unmounted and all of its hooks would be destroyed. So it would go back to its default state next time you went back to it, right? By the same token, it would not update necessarily the details page either, right?

[00:03:52] But because now this lives in-app, right, and in-app is always rendered, right? In-app never unrenders. So the advantage of this is now the state will live beyond page navigations.
>> Brian Holt: So let me demonstrate my point to you here, right? Let's change this to be Medium Orchid, right? And if I go to the details page here,

[00:04:16]
>> Brian Holt: It's blue, why is it blue? It should stay.
>> Brian Holt: Well, that's not what's supposed to happen. That ruins my point.
>> Brian Holt: SetTheme,
>> Brian Holt: darkblue,
>> Brian Holt: Then you go back to the homepage.
>> Brian Holt: Peru, and then navigate. It's fully unmounting the page, that's really interesting. So I'm not sure why it's fully unmounting the page.

[00:05:42] I have to go look. But you can see it's actually clearing the console every single time that I navigate. So that's fine.
>> Brian Holt: What is the link there? That's the link coming from Pet. This is why. I don't know why we didn't ever end up updating this. Let's go ahead and update it now.

[00:06:08] So here inside of pet.js we want to import Link from @reach/router,
>> Brian Holt: Okay?
>> Brian Holt: So we're gonna change this a right here,
>> Brian Holt: Instead of being an a, we're gonna make it a link. Instead of an href, we're gonna make this to.
>> Brian Holt: Right, and we just change this from being a normal anchor tag to being a link tag.

[00:06:43] And now, whereas before it was actually doing a full page navigation was changing the page, right? So it was destroying the dom and then rebuilding it again. Now, it's actually going to use HTML history to navigate the pages.
>> Brian Holt: Okay, so now if I just change this to Orchid, and then I go to Fat Boy Slim here, notice that it's still Orchid.

[00:07:14]
>> Brian Holt: Makes sense?
>> Brian Holt: Did it also make sense the error that I had? It's probably good that you saw that error because that's what you'll see if you accidentally forget to use a link tag, instead of an a tag. It's another thing that [INAUDIBLE] is doing for you.

[00:07:29]
>> Speaker 2: This error wouldn't present itself if we use the navigate though, right?
>> Brian Holt: No, yeah, navigate would also use history as well. This is purely if you use a, right? So redirect would handle it correctly, navigate would work correctly. It's just purely if you use a.
>> Brian Holt: Good question, other questions?

[00:07:53]
>> Speaker 3: With the hooks kind of utilizing the array destructuring, if you for some reason wanted to pull out the updater, but not use the current state somewhere, is there a convention for doing that?
>> Brian Holt: Typically, you just put an underscore, eslint is still gonna yell at you. And the way that you just disable the line, right?

[00:08:16] So what he's asking if I have a hook here, let's just say const blah equal, or blah and setBlah, right, = useState with blah, obviously. Like this, what happens if I don't actually care what blah is right now, I just wanna update blah, right? How would I do that?

[00:08:39] This is what I would do, I would put an underscore there just to signify to myself that I'm not using this, this is worthless. It's the same thing I'll do with parameters as well.
>> Brian Holt: But eslint is gonna say this is unused variable and I don't like that, so the way you can just do that is just say eslint-disable line.

[00:09:02] And you can actually tell it to disable specifically no unused vars, no-unused-vars, right? And then it will specifically disable that for that line. [BLANK AUDIO]