Transcript
00:00 So we need to preserve this state so that it can actually increment. We're going to make it work finally. So let's add a let for state, state, and set state. We'll set their types to any. Because this isn't a TypeScript workshop and making this really nice and type safe would be a little bit of a challenge.
00:18 I don't want to distract ourselves with that. So we're going to do that. And then we're going to remove the declaration for both of these so that they're referencing the state variables that were declared above. And with that they're just being assignments. Now the trick is though that we can't just have that
00:37 assignment every time because every time you state is called we're going to reassign state to the initial state and set state. So we only want this assignment to happen when we are initially calling you state. So we can say if the state is undefined, so it hasn't been set yet, then we can set it.
00:55 Okay, and then finally to make things a little bit nicer as far as the types are concerned that we can stick this right here so that we're not returning any from you state and our count can still be a number. So that's not all that hard. So we're going to do that. Okay, great. And now we are incrementing every time. So it is actually working.
01:15 We have implemented our own you state and the way that we do that and ensure that the state remains in force is we declare that state outside of the module or the function itself. So that variable can be mutated over time and referenced again. So
01:35 when you state is called initially we get that initial state. We assign the state to that initial state because it's undefined and then we say set state equals this function that will reassign it to the new state that it's given and call render to trigger a re-render. And so whenever the button is clicked we call that set state function which will assign the state re-render.
01:57 That will call our app root dot render the counter. React will call this again and say okay here's you state. We go through you state and now it has been defined and so we just return whatever the current value is which will be the latest state. So there you go.
02:12 You have a functioning you state for a single component. There's more to do yet, but it is working. Good job.