State Management in Pure React, v2 setState & Class
This course has been updated! We now recommend you take the React Performance course.
Transcript from the "setState & Class" Lesson
>> So we're gonna start off by looking very closely at React, a class based components state and the stuff that state. And so the inner workings and things that you may have noticed that does things that you didn't know that it does so on and so forth. And then after that will kind of compare to how they differ some poke the first we're gonna take an uncomfortably close look at how this stuff says state works.
[00:00:22] We are gonna start with the world's simplest React component, right? The kind of almost like Hello World React components, there's a small counter application, it will increment, it will decrement, so on and so forth. So let's take a look at it. Here it is. It does have one problem to it.
[00:00:43] Let's make sure that's still running, it is. So it's got an increment button, it's got a decrement button, it's got a reset button. The problem here is that none of them do anything. In fact that zero isn't even stored in state, it's just hard coded right in there, all right.
[00:00:57] So there's no sense of state management, right? Now again, this is a simple React component. if you used React, before this will seem like old hat. It's mostly to get ourselves warmed up and loosened and so as we begin to refactor, we see what we did in the first place.
[00:01:09] We can kinda see it forward, rather than being like, here's a done app. Let's go poke around on it. We'll input pieces of it that we are going to end up refactoring, all right. So I'm gonna switch over to the code. And here it is. As I said before, this could have just been an HTML page.
[00:01:28] There is no reason that I had to load react in order to do this other than to make a point and refactor it and stuff along those lines. But right now it is a hard coded and zero, some buttons that don't do anything. So let's just start again, get ourselves warmed up, get ourselves limber, and ready to go.
[00:01:45] We're gonna start off just by implementing this in the kinda traditional components state. So one of the classic ways that we can hold on to state is in the constructor Pass the props up to the actual component class cuz we're sub classing it. And we'll say this.state. I'll call it count.
[00:02:12] And I'm gonna start with the number 3, just to prove to you that I'm replacing the 0, cuz if I store 0 in state and then I put this.state, you're gonna be like I don't know anything changed. So we'll make it 3 for now, but we'll switch that back in a second.
[00:02:24] And then in render, we just read that state. And then we can replace it. Cool, so let's flip back over, we've got the number three, we're already killing it. So now it'd be cool if other than just storing some state memory running on the page, this isn't that much better than an HTML page will implement the ability to increment and decrement it.
[00:02:54] So that's going to be a series of methods on this class. What's the increment? I will say this.setState, which is a method that we inherit from the component class. We'll say count is this.state.count + 1. All right, I don't want to type that three times, so I'm gonna do a little bit of copy paste action here.
[00:03:16] Decrement spoiler alert, it's gonna subtract one. I don't want to take a lucky guess at reset those, set to 0. I was actually made the default 0 as well. All right, we have the ability to change the state, we do have to bind it to the buttons. And I already had a freudian slip there that you'll catch me on in a second.
[00:03:40] For incrementing, we'll say this.increment. For decrementing, we'll say this.decrement, and for resetting We'll say this.reset. All right, Now, is this gonna work?
>> No, let's verify that. Also, if you don't actually name this one reset, that'll create its own set of problems. All right, it blows up because it's like, what is this, right?
[00:04:16] Which is honestly an existential question that we're not fully equipped to answer. Let's do the short version, which is all these events are fired on a click event listeners, those go on to the event loop or onto the event queue, which the event loop checks. And because this is not necessarily self and other programming languages, it is more the context of execution, it has lost track of what this is.
[00:04:42] That either resonates with you or doesn't? But let's just talk about how to fix it. Which is to kind of like say, all right, I have strong opinions on what this is. So one of the kind of ways that we've done that in class Bay State, which is not my favorite, is to say, all right, when we're making this instance of the class, we'll grab these kind of generic ones and we'll bind it to the current class.
[00:05:09] If this stresses you out, don't worry, we're gonna delete it all. I will say reset. All right, so this point, if all goes well, we should have a working counter. It increments, it decrements, it resets. It's amazing. We can all put React on our LinkedIn profiles now. We're ready to go.