‫In this lecture,
‫we're going to create a new custom hook
‫called useLocalStorageState.
‫Which, basically, will behave
‫exactly like the useState hook,
‫but where the state actually gets stored in local storage.
‫And so with that hook,
‫we will then be able to replace this code right here.
‫So this state,
‫which gets the initial value from useState
‫or from local storage actually,
‫plus this part right here
‫which is responsible for storing the state in local storage.
‫Okay.
‫So, right in our source folder
‫let's create a new file for use
‫Local
‫Storage
‫State.
‫Now okay, so export, and then again
‫useLocal
‫Storage
‫State.
‫Now, some people would probably
‫just call this useLocalStorage,
‫but I want to make it really clear
‫that the idea of this hook
‫is to work in the exact same way
‫as the useState hook.
‫So, of course, here we're missing the function keyword.
‫But now let's come back here,
‫and in order for us to know
‫how we should design our hook,
‫let's first call it.
‫So, as I mentioned,
‫I want this hook to work basically
‫the same way as the useState hook.
‫And so it should also return an array of the state.
‫So let's call it watched again,
‫and off a setter function,
‫so setWatched.
‫And then,
‫we'll use localStorageState.
‫and, again, make sure that it is correctly imported.
‫And then, we want to pass in the initial state,
‫which, remember, for the watched array was simply
‫this empty array.
‫Right.
‫And so let's now comment out this,
‫and actually before I will copy it
‫and then comment it out.
‫All right.
‫So let's then come back here to our hook.
‫And so first of all, we can specify the parameter.
‫So the parameter here is basically the initial state.
‫Okay.
‫And now, I will paste in what we just had there before,
‫which is this state.
‫So, let's import useState here.
‫Import
‫useState
‫from React.
‫And now, here I want to give these variables here
‫some more generic names
‫because remember that the idea of this hook here
‫is to easily reuse it in other projects.
‫So let's just call this value here and then
‫setValue.
‫All right.
‫Now, right now we simply have a custom hook,
‫which sets some state
‫and reads the state from local storage.
‫But that's not super helpful yet
‫because, of course, we also need to update the state
‫in local storage.
‫So, we also need to get this useEffect right here.
‫So, let's cut that from here,
‫and let's actually delete all of this as well.
‫And then let's paste this here.
‫And, of course, we will have to rename then these things.
‫So, this is now no longer watched
‫but just our generic value,
‫right?
‫And then here, we need to also import useEffect.
‫Now, there's still one big problem here,
‫which is that we have this key here, hard coded.
‫So of course, again,
‫this needs to be reusable and generic.
‫and so therefore,
‫we need to allow the user to pass in
‫the name of the key.
‫So this is not 100% similar to useState anymore,
‫but this is really necessary, otherwise this cannot work.
‫All right.
‫Then here, we also need to pass in the key
‫because our effect here depends on that variable.
‫Now, okay.
‫And now, to return,
‫we simply return an array,
‫which has the value
‫and setValue.
‫And so then, it works exactly like the useState hook.
‫So here, we already destructured that result.
‫So that array, again, into the state variable and
‫into the state setter.
‫Now here, we just need to pass in that key.
‫So that's watched.
‫And as I save this, actually,
‫immediately our watched list is back,
‫which means that this custom hook is fully working already.
‫But let's just go back and do some fixes here
‫because in the very beginning,
‫if we had no local state at all yet.
‫So let's simulate that.
‫Here in the application tab.
‫So let's remove this.
‫And so now, this doesn't really exist,
‫and so then we should get some problem.
‫So here in the console.
‫Now, of course, we have these problems
‫because now our watch list is basically null.
‫And so then, our app somewhere
‫is trying to call the map method on that.
‫And so, we need to fix this,
‫and we do this by actually using null, the initial state,
‫which, up until this point, we actually have used nowhere.
‫So we passed it in,
‫but we haven't reused it anywhere.
‫So, what we need to do now is to check
‫if this stored value here actually exists
‫because right now it doesn't.
‫So, we can easily check that.
‫So, this will then be this null
‫that we can see here.
‫So, yeah, there it is.
‫And so, we need to say here, basically,
‫if there is a stored value,
‫then return this
‫and otherwise then return the initial state.
‫Which, in this case,
‫is going to be that empty array.
‫So, let's get rid of this.
‫Let's reload.
‫And so then, as we come back here to the application,
‫we will see that, indeed, now we have an empty array.
‫So that's our initial state that was stored
‫into local storage because of this useEffect, right?
‫So, remember that whatever this function here returns
‫will be the initial state value
‫of this useState hook.
‫And so then, at the very beginning
‫value becomes this empty array.
‫And then, as this effect here is executed,
‫after the re-render,
‫that value is already that empty array.
‫And so that's what is then stored
‫here into our local storage.
‫Okay.
‫So, that's again it.
‫So, what we did, again,
‫was to take all the code that belonged together
‫and placed it into yet another hook.
‫And in this case, we made it so
‫that this hook looks as close as possible
‫to the useState hook.
‫So, we also pass in some initial state,
‫and then we get back a state variable
‫and the updated function as always.
‫But thanks to our special custom hook,
‫now these work a bit different.
‫So, this piece of state here can be read
‫from local storage as the component first mounts.
‫While the setter function
‫will not only update the state itself,
‫but it will also update the local storage.
‫And so, we coded all this functionality right here
‫in this reusable custom hook.
‫Let's just test this one more time.
‫So being sure that it works.
‫Yeah. But here it appears.
‫And as we reload, then there it is.
‫So, great.
‫Just to make sure that you understood what happened here.
‫And if you want,
‫it might even be a good exercise
‫to put all the code back,
‫and then do it all again on your own.
‫But, anyway, if you don't feel like doing that
‫then let's just move on to the next lecture where
‫we will create just one more custom hook.