Intermediate React, v3 useState

[00:00:00]
>> The first thing I'll really wanna get into with you all is hooks. And we're gonna go into hooks in depth so you can really understand all the various hooks available to you in react. So, let's go into the hooks in depth part. And to the use state one.

[00:00:15] So at the top of this one is a link to a code sandbox, code sandbox is just a code pen. Or it's like an online editor that's kind of stripped down where you can kind of do experiments and share them with people and I'm a big fan. So, for this hooks in depth section, all of it is going to be using this code sandbox.

[00:00:37] Take a second to come up here, And you can see here I have a very stripped down version of the repo here, right? So I have a, this is all on GitHub. It's on react hooks examples, stash v3 if you want to go fix anything on that. You can see here that's importing react DOM.

[00:00:59] And then we have all these various different components here, which I'm breaking apart with horizontal rules, which is not a HTML element that you see super frequently. So you can see here we have something like 10 components here. And so they use state one here is the use state example the use effect one here is the use effect one and we're just going to go on component by component and explain to you all the various different hooks that you can do.

[00:01:27] So let's go ahead and dive into this first one here which is state, So it's called State.js. And this is something that you probably already understood before but let's just go on to make sure that we understand you stay for us because basically everything depends on you state.

[00:01:40] So if you don't understand you state, you're gonna have a bad time. Let's see, maybe this just a little bit further out but then we can see and do a wrap. Yeah, that's better. Okay, bigger again and make this, there we go. Okay, so you state at its most basic allows you to hold on to state.

[00:02:09] So, a good example this is I have this useState, I think it's an h1. H1 that just goes back and forth between lime green and crimson. So on click is shifting over to be green by setting it to be the opposite of whatever it was, right? So you can think of you state is just like a very simple container.

[00:02:31] For state, so I have used to here I have true, true is gonna be the default value. So whenever this gets rendered the first time is green is going to be true. And then I have this ability to set is green. Now whenever I call set is green No matter what even if I say set is green true again, it's going to kick off a rerender.

[00:02:51] And it might choose not to end up re rendering that if it detects that none of the state changed but it might. So you can basically just think about every time that I'm calling set is green is going to kick off an entire another rerender cycle for you.

[00:03:06] Any questions about use state?
>> Yeah, just a quick clarification question. So when it rerenders is it re rendering that one component only or is it re rendering everything in that page?
>> React is pretty smart about what it chooses to rerender and what it doesn't choose to rerender that's actually how react is able to get some pretty good performance benefits, right?

[00:03:24] So like a good example this if I scroll down on here, you can see that I have like a last rerender here, despite the fact that this is all one react application, this is not going up, right? Whereas like if I clicked on this right now, notice that it does go up.

[00:03:39] So the thing I'll tell you is like, it doesn't kick off and rerender everything but you're also not always going to be positive of what it's going to render and what it's not going to render So in other words, make sure all of your renders are very performant.

[00:03:52] Right, because if they're not performance, you're going to greatly slow down your application because those renders can happen a lot. Like you can see this one here, this is re rendering every second. So and that's, it can be much more fast than that as well. So the question is, does it re render its children, and it's at least going to attempt to re render its children.

[00:04:10] So if you still had children, it would attempt to rerender its children as well. But again this magic reacts scheduler and so you're not always totally positive of where it's gonna be able to optimize performance more. It's not going to be, so in general just write performant code.

[00:04:30] Just write good code. I think that's the summary of my story here is write your code well. General life advice with Brian. So the question is I get like a whole slew of data and I know some of the components don't need to update and maybe they're expensive to update.

[00:04:45] So it do I have like a knob that I can go in and say, hey, definitely don't really rerender this even though you might want to answer is yes. So there is a lifecycle method on class components called should component update. And should component update allows you to go in there and say I know that you maybe your state changed and you might want to re render but I'm going to tell you right now you don't need to and you can just return false and that should component update method.

[00:05:12] So something we're going to talk about today but that's some kind of like advanced react perf stuff that you can get into. There's a temptation when people learn about should component update, that they're gonna go in there and like throw it on every component that they have and do not do that.

[00:05:25] You're gonna make your code so much harder to understand like, why is this not re rendering, right? So, the first what I'm gonna suggest you with all these kinds of like, advanced react perf things is, have a problem first and then solve a problem, right? So have a performance problem with whatever components you have first don't preemptively solve it because it makes your component a lot more complicated to understand.