00:00 All right, so I've got my application tab open where you have local storage selected and here's what I've got in my local storage, which is nothing right now. That's perfect. Good place to start for this exercise. So we're going to say our key, the thing that we want to set in local

00:16 storage where we're going to store this data, we're going to call that squares and that will work just fine for what we're trying to do. So now what we need to do is let's start by updating local storage with our squares. We'll get to reading and initializing from local storage

00:31 here in just a moment. So starting with the use effect that runs anytime the squares change, squares, we want to stringify our squares in local storage so that it can be read later. So we'll say local storage set item at that key squares to the stringified version of our squares.

00:50 So if we save this, then right from the get-go, this use effect runs and it sets our initial state, which is just nine elements of null. Okay, so then I make a change and boom, would you look at that? Now it's got an X and I go into the bottom corner and we'll take a look at that. Boom,

01:08 it's an O. Hooray! So things are going well as far as that's concerned. So now from here, we need to be able to read the value because refreshing is just going to reset it back to null because our squares start out in this default state of null for everything. So

01:26 we're going to switch this to use the callback form. And inside of this, we're going to try and get the squares. And if they exist, then we can parse them with a JSON parse. Otherwise, we'll just fall back to the default state, right? That works out. So refresh. And if I click here and

01:44 click there and then refresh and would you look at that? It worked. It worked swimmingly well. I don't even know what swimmingly means, but I say it sometimes. It worked great. So there could be a problem where this squares thing doesn't exist. So if I clear this out and then refresh,

02:02 then it looks like we handled that okay because we were already handling the situation of squares doesn't exist and don't bother parsing it. But what if, let's go back to our application tab here. What if I change this because I'm a bad user and I'm going to change it to this? Oh man,

02:18 what are we going to do? We're going to blow up is what we're going to do. So we don't want to deal with that problem, especially if we decide to like, I don't know, migrate from one to another. And now we've got errors we got to think about. It's kind of interesting when you've got databases on the user's machine, which is sort of what this is a little bit. So as part of this extra credit,

02:38 we're going to handle that eventuality by saying if there's not squares, then we can return the default state. Otherwise, we're going to try to parse it. Yeah, we can just return JSON parse squares. Otherwise, we'll return the default state. And in fact, I don't really care about

02:57 the error. That's fine. So now it works and we reset the squares to where they should be. Beautiful. And that all can happen with inside of this function and putting it in the function makes it safer because it means it will only run on initialization. It's not going to run

03:14 every single time we change a square or re-render the application. And then our use effect will just keep our local storage up to date with whatever the squares are at the time. There you go. That's use effect with dependencies. That's the use state with a callback form. We're in a pretty good spot. Good job.