This course has been updated! We now recommend you take the Intermediate React, v5 course.
Transcript from the "useState" Lesson
[00:00:00]
>> The next thing that we're gonna do is we're gonna go over all the hooks that are available and react, all of them. So what I want you to do go back to your course website here, and come down to hooks in depth. So suddenly, as you've seen before, like you state and use effect, but some of these will be brand new to you.
[00:00:23] And I kind of tried to go in order of how useful they're going to be to you. So let's go ahead and start with you state. Obviously the most useful of that we're gonna do this all in code sandbox. It seems like a good way to fit this all into one kind of cohesive view.
[00:00:38] If you're not familiar with code sandbox it's like any one of these like online code editors like GitHub Code Spaces or code pen or stack blitz or JS fiddle, there's a million of these out there, right? I like code sandbox. Just, I mean, I like the team and I think it's a relatively nice use of the VS code base, right.?
[00:01:02] Obviously this is very VS codey. That is a word VS codey, just in case you're wondering. Thanks for asking. Okay, so this is a fairly simple project here but you can see here actually just put all of the examples onto one page so you can kind of just go down and see step by step each one of the examples here.
[00:01:25] So we have used state to use effect, all that kind of stuff, you can see here the state component is here, state.js. And we're just going to go over bit by bit all of these various different use cases. Here we go. So, to show you this top one, if you just click on it, it goes from red to green.
[00:01:48] I must have been in like a Christmas move when I wrote this. That's also super inaccessible if you're colorblind, I'm very sorry about that. That just occurred to me. [LAUGH]. If you are red green colorblind, you can like Brian is a horrible person which is objectively true. [LAUGH] But if you click on it, I promise you it is changing between red and green.
[00:02:11] So yeah, we could change this from crimson to be, I don't know, like cyan or something like that. There you go. That's probably, I mean, now it's not super accessible as against a white background, but at least it's red green colorblind. That seemed like intentional and I promise you it was not [LAUGH].
[00:02:32] Okay, so for this particular hook here, use state, we set it to be true, this value is true. Something I'm gonna just throw out here as a word of caution. It is the default value, but if you're doing something here, that's like costly. So a good example that is, I don't know why you would do it.
[00:02:54] Whatever, this doesn't matter. But if you do something like document.createelement('div') or something like that here where you're actually doing something that's doing. This is not a cheap procedure to create and destroy DOM nodes. This would be the default value, it would be a div, right? But every time that you ran this function it would be creating a div that you would just be ignoring after that, right?
[00:03:20] So this is where you would not wanna do something like that. And just make sure that whatever you put in here as the default state is either already computed or it's cheap, right? Just kind of a performance thing to think about there. Also, I don't know why you would create a div and keep it in state but I don't know.
[00:03:39] So I'm sure somewhere someone has that use case. Okay, I think, can you just give this a function? I don't know. That's a better question coz then it would only get invoked the first time. Just so you know, this does have its own console. So if we look down here at the console it does.
[00:04:08] That's kind of cool. So today I learned. So what's advantageous about this is now this div's all you need be created once, right? It's gonna only invoke that function once. Which means that this document or this does only thing get created the first time Right now I want you to go away cancel this one, there it is, okay.
[00:04:35] Okay, and then here you're just calling this is giving you back a tuple. Which I intentionally say incorrectly, so that upsets people that come from Python, it's a tuple but I calling it a tuple which is just a pair right? The first thing is the current state so is green.
[00:04:50] Is it green or not? And I guess now I've made it yeah, this green. And then I have this thing to set is it green or not. Here on the on click which we're doing in a very inaccessible way at the moment, we are calling a function that's setting the green to be is it the opposite of it's currently green, right?
[00:05:12] So if it's green it's making it not green if it's not green it's making it green. And that is useState which should not be surprising to you if you're coming from the intro react