Current section: Multiple Hooks 16 exercises
solution

Explicitly Defined Phases

Transcript

00:00 So let's start by creating our symbols. We'll have our initialization symbol. This will be a phase dot Initialization and then we'll also have our update and the actual values here inside the symbol. They don't really matter. They're just identifying

00:15 These different phases or giving us a description. So if we were to log these it would have something useful to log We're not really going to make much use of that, but I like to have the description. It's fine So then we'll make our type for the phase that is a type of initialization or an update

00:32 So those are two different phases and then we'll initialize our phase. We don't actually have to set it to an initialization because We're going to update our phase during the render process. So we're going to have a new phase Property here that will not be optional And it won't default either and inside of here

00:52 we'll set our phase to the new phase and then when we render We'll render it with the initialization phase and then up here when we're updating we're going to pass the update phase and Then finally this isn't actually going to solve the problem. We're still going to have the problem of These values not being initialized properly

01:13 So we need to say hey instead of this implied phase that we're in where we say if the state isn't undefined Then we must be initializing. No, we're not going to be implied anymore We're going to be very specific if we're in the initial initialization phase

01:27 So right here only then will we initialize our values? Otherwise, we're going to Go we're not in initialize it because it's an update and so what that allows us to do is that These use states are going to be independent This will be a different value of state and set state from this one

01:48 And with that now we have our count to zero and are enabled is true And so our initial value here is correct Now that still doesn't solve the actual problem because each one of these is going to be updating the same state variable So if I click on this now, we're back to the same problem that we had before but at least it is going to

02:07 Ensure that our initial values will have two separate values for state and set state The next step is to allow us to maintain and preserve that difference over time So well done on this one