Instructor: 0:00 All right. Let's persist this thing. The first thing that we need to do is I'm going to get this persisting into localStorage using react.useEffect(). We're going to say react.useEffect(). Anytime my component renders, this function is going to get called. My component can re-render because the name update it.

0:18 I'm going to say window.localStorage.setItem(). We'll set it as a name. Then we'll say, "Name is the value that we want to set into localStorage."

0:29 Cool. If I save this and then come in here, you'll notice that name gets added to localStorage. You also know we have this color mode in localStorage. That actually is for the app. If you change this to light, then you'll see that the color mode is light. That's what that's all about.

0:44 But here, we have the name in localStorage. It is set to an empty string as a value. That's because our useEffect.callback() is called for every update of our component and for the initial render. This greeting was rendered. Our usEffect was called and reset the itemName to that empty string name, which our state was initialized to.

1:05 Now, as we go ahead and type, if I type "Kent," then we're going to get that value updated with every keystroke of my keyboard. That's great. But if I refresh, I'm not going to get that updated. In fact, my name is now removed from localStorage. Why is that happening?

1:23 Well, what's happening here is we're saying our initial string = " ", we're going to set our useState(initial value) to that empty string. Now, this name is an empty string, we finished rendering. Then, our useEffect.callback() is called. That name is an empty string, so we're overriding that value.

1:41 The second half of this is we need to pull that initial value from localStorage when we initialize our useState() call here. That's what Mario the Moneybag is doing for us right here because it saying, "Hey, let's grab that initial value and we'll put it right here." We'll say, "Hey, localStorage get me the name item out of here."

2:00 If there is no name, then we'll just go with whatever the initial name was, so if somebody is loading this application for the first time, for example. If we save that, we'll refresh, we have nothing in there. We we type "Kent." Then, we've got something in there. We refresh. Oh, no. It's not in there. That is because it looks like somebody removed the value here.

2:22 Let's go ahead, and we'll add that back here. Sweet. Now, we're getting that initialized properly. Everything's working stupendously. I can make other changes here. I could say, "Adam." Refresh, and there's Adam. It's persisted for the lifetime of this localStorage value.

2:39 In review, what we did here was we had a side effect that we wanted to run to synchronize the state of the world, specifically localStorage, with the state of our application, specifically the name value.

2:51 Every time our component re-renders, this callback will get called to do that synchronization. Then as our component is initialized, we need to get that initial value out of localStorage. We we do so with localStorage.getItem API. If there is no item by the key name, then we'll just default to the initial name.

3:10 The benefit of that is now I can say, "Initial name is George." We'll say this. We're going to get Adam because Adam was in localStorage. If I clear localStorage and then refresh, we'll get our initial value of George and that gets saved into localStorage. All of this wired together is working as we would expect.