Preserve State in localStorage

[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.

[00:00] We're gonna do a little bit more with our state and now we're gonna get into some effects as well, synchronizing the state of the world with the state of our app because our users want to be able to say, whoa, whoa, stop, I need to think about this next move. They wanna close the tab, they want to refresh the tab, whatever, and they want their game to be right there.

[00:19] So we're gonna persist this and we're gonna persist it in local storage because that's what the users want, it's just right on their device. And so the trick is, we need to initialize our square state properly. We also need to keep our local storage up to date as it goes. So yeah, a couple of things you're gonna be doing,

[00:38] the callback form of useState, you're also gonna be managing a useEffect that's going to write the squares into local storage and your initialization function is going to read the squares from local storage. It's gonna be a good time, so let's get into it.

In this workshop, we'll learn how to use hooks to manage state, synchronize side-effects, generate unique ids, and more. 

**You'll get a solid understanding of the basic hooks and how to use them.**

We'll be covering these hooks: 

- useState
- useEffect
- useRef
- and useId

At the end of the workshop you'll put everything you learned together and build a Tic Tac Toe game with game history saved in local storage!

## Managing UI State

React's App Lifecycle: Initial Render → Create the DOM → User Interacts → State Changes → Re-render → Update the DOM → Repeat.

Here, you'll be learning how to use the `useState` hook and about the cycle of user interaction, state changes, and re-rendering. The core of how React works!

## Side-Effects

In this section, you'll learn about the `useEffect` hook.

`useState` is for component state, and `useEffect` is for managing side-effects (things that happen outside our react components).

Things outside our react components include:

- Browser APIs like local storage, geolocation, media devices, etc.
- Integrations with third-party libraries like D3, Chart.js, etc.


## Lifting State

A common question from React beginners is how to share state between two sibling components. 

The answer is to "lift the state!" 

But, sometimes you'll find yourself in the opposite situation, where you have state that's lifted too high and doesn't need to be shared. So, in this section, you'll also be learning how to "colocate state."

## DOM Side-Effects

Sometimes, you need to update the DOM directly, like if you're needing a library that interacts with the DOM or ar dealing with focus management. 

To do this you'll learn about how to use both the `ref` callback and the `useRef` hook. 

## Unique IDs

Form input elements need to have globally unique `id` attributes. But, you're also building reusable components in React. 

How do you make sure that you're getting unique IDs?

In this section, you'll solve this problem with the `useId` hook.

## Tic Tac Toe

Here's where it all comes together!

You'll practice all the skills you learned over the course of this workshop by building a Tic Tac Toe game with game history that gets perserved in local storage. 

It's tougher than the other exercises. But, after you get through it, you'll have really solidified everything you learned.

Learn React hooks to add interactivity to your apps and build dynamic websites. You'll learn the core React hooks including useState, useEffect, and useRef.

React Hooks

React Hooks

Transcript

Preserve State in localStorage

Transcript