This course has been updated! We now recommend you take the Intermediate React, v5 course.
Transcript from the "useState" Lesson
[00:00:00]
>> Brian Holt: All these sections like I was alluding to previously are going to have to do with one repo, except the first one. The first one that we're gonna do here is Hooks in Depth. And this is actually going to be on a code sandbox, which is like a CodePen or JSBin or something like that.
[00:00:17] So, go ahead and click in to Hooks in Depth here. And open this link in where it says open this is code sandbox, just open that link there. So in the Complete Intro to React V5, we go over useState, useEffect, useContext, and useRef. We go over parts of useRef, not all of it.
[00:00:41] But these three are pretty well covered. useState, useEffect, and useContext. We'll go over them again, but just so you know, if you've gone through that course, you should understand at least most of that. Using these four hooks, I'm just going to assert that you can cover 99% of your problems.
[00:00:59] Maybe 100% of your problems, [LAUGH] right? The other ones are kind of a long tail of other hooks that you could possibly use, but I'm going to show you how to do it anyway. So in here you can see that I have each hook, I link directly into the component and then there's an explanation of it.
[00:01:17] So if you want to keep up with it, that's what we're going to do. We're not going to actually write any code, this is all just going to be me talking through the code that's already written up there. What you see in front of you here is there's a project that has a bunch of different components here.
[00:01:32] And then it has one app page that renders out all of these various different things. So we're just going to go through piece by piece and talk about each individual hook and what they do. So you can see here the index.js, all it does is it renders a component, and then it does a hr, which is a horizontal rule, which is the line here.
[00:01:51] It's a HTML component, or a tag rather, an old one at that. Okay? So let's go take a look at the first one, which is state, which is state.js over here.
>> Brian Holt: And it's this first one here where if you click on it it changes colors. Magical, right?
[00:02:16] So let's talk about the code that governs that.
>> Brian Holt: Make this a lot smaller. Okay, so here we're importing React and useState from React. And this stateful component, which is just a arrow function, right. We're using useState and we're setting the initial state to be true, right. So that means on the first time that you get isGreen, isGreen is going to be true, right.
[00:02:43] But that's only applicable on the very, very first time, it's the default state. Everything after that, it's a state container, so it's keeping track of state over time. So hook comes back in a pair, a tuple, a tuple, whatever you wanna call it. In JavaScript, it's an array of two.
[00:03:00] There's no special data structure for this in JavaScript, but in Python, there is, right? Or Haskell or something like that. So this is destructuring out. So the first thing is the actual piece of state that we're going to keep track of. And the second thing is a function to update that piece of state.
[00:03:19] So here it's green on the first render. If we were to refresh the page here, You can see it's green on first render. So isGreen is true, right? And here all we're doing is saying if the color is green, then put lime green. If it's not, then put crimson.
[00:03:35] So if I click on it, then I call this function here that says set green to be the opposite of whatever isGreen was, right? So right now isGreen is true. So I call this onClick handler, it's gonna to set this to be false, right? And lo and behold, if I click on it, it turns to red.
[00:03:55]
>> Brian Holt: Keep in mind you can have as many hooks in one function as you possibly want, right? So I can have multiple different pieces of state. And each one of them can have their own updater function. So again, one of the cardinal rule of hooks is they cannot be inside of conditionals.
[00:04:11] They cannot be inside of for loops or anything like that. They always have to be called, because it's very, very contingent on or dependent on it being in the same order every single time. So if I call useState ten times, I need to call it in the exact same order, every, like all ten times.