00:00 Let's start by making that hook index so our and this is going to be a let hook index start out at zero and while I'm thinking about the hook index let's make sure we reinitialize it to zero every time we render that way we always start at the very start and then we're going to make our bucket

00:19 of state so here's our states this is going to be an array of our state values so our state values are the state and then the state updater and so we'll have our state which for us we're not going to get too complicated with this we'll just set that to be any and then our new state of any

00:38 that returns a void and that is our array so here's our bucket of state now we no longer need the state and the set state anymore because we're not going to be referencing those we're using this bucket of state for preserving that state between renders okay so we're getting TypeScript yelling

00:55 at us this is why we love TypeScript we're going to get our id from hook index so we're going to increment the hook index and grab the current value so that will that plus plus is going to handle that for us and then we're going to set the states at that id to this value that we care about

01:13 so that's going to be our initial state and it's also going to be this function here but the function needs to change because we no longer have that state and so we're going to say states at that id and the zero item so that's referencing the state value and that is what we're going to

01:30 be sending our new state to then we trigger a render that will come through here with this use state again and because it's no longer initialization we're doing an update now it will simply return the state value so we'll just say states at id and that will be

01:49 our current value of the state whatever that was set to as well as this function to keep that state updated and with that now we should have a functioning ui oh my goodness look at that we can even define the word so that is multiple states you have to have some mechanism for

02:09 identifying different uh hook calls and so this maybe this is kind of making you think about the rules of hooks a little bit and like oh wait my condition uh or conditional hooks don't work because they need they're identified by when they are called in order relative to the other ones and

02:26 if you have a conditional hook now the order has changed and so we can't do conditional hooks for that reason you can't put it in a loop because again um they are identified by when they're called and if you had if you put this in a loop that looped two times the first time and three times the next time or vice versa then that's going to cause us some problems so this hopefully

02:44 helps you understand a little bit about the rules of hooks and then we have a bucket of state a place to put that state and we look that up based on the call if we're in the initialization phase and we'll initialize it and in any case we will return that value and yeah we've got a totally working ui which i think is pretty stellar