Lift More State

[00:00] So let's come down here to where that state is being managed currently. We have this isFavorited state, and we need to lift that up to matching posts. But it's not quite so simple this time, because this is relative to a specific card. If we just move it up here into matching posts, it's like, wait, which one is favorited?

[00:18] So instead, we have to have a list of IDs or, yeah, just like an array of all of the IDs that are currently favorited. So it's not just a matter of move that state up, but like actually think about what that state means.

[00:33] So here we're going to have a useState for favorites, and this will be an array of strings. So we'll give TypeScript a little bit of help with that array of strings. There we go. And from that, we can derive the sorted version of this. So we've got this sort already put in here for us.

[00:56] And because this isn't a JavaScript workshop, we're going to just give this to you. So it's a workshop that includes JavaScript, but I'm not here to teach you JavaScript. So here we determine whether the A is favorited or B is favorited. And then based on that, we return the proper number so that these are sorted properly.

[01:15] OK, so with that, though, now we have to not only set those favorites appropriately when one is checked or unchecked, but we also have to derive that state properly in the card. So we're going to pass an isFavorited and an onFavoriteClick.

[01:32] So isFavorited will be if the favorites includes this post's ID, then we know it's favorited. And then when the heart is clicked inside of the card, we're going to pass whether it's currently favorited. And if it is, then we're going to return the updated favorites.

[01:53] So here we'll set our favorites. We get the previous favorites of the current value of the favorites, what used to be the current value. So it's a previous. And if we're toggling it to or if it's currently favorited, then we're going to filter out our current post. We're going to unfavorite it.

[02:12] If it's currently not favorited, then we're going to combine the previous one with our new post ID. OK, great. So right here, I think my instruction said call this favorited or toFavorite or whatever, but that works just fine.

[02:31] OK, so now we've got to come down here and accept those props in addition to what we have already. So we've got isFavorited. And that's going to be a Boolean and onFavoriteClick, it will accept an isFavorited Boolean and return nothing. We don't care about whatever it turns and we'll accept those right here, isFavorited and onFavoriteClick.

[02:52] There we go. And then down here, this will be onFavoriteClick. And this is the state we want it to be. And that should take care of those. And then down here, it's just working out already with this isFavorited. Yeah, we determine which heart to show based on that.

[03:15] So we've got everything. Hopefully this works. Let's just test it out. Click on that. And oh, totally not working because this logic is incorrect. I was worried about that. So this isn't whether it's currently favorited. This is what the next phase should be. So I'm going to blame our AI assistant for getting that wrong.

[03:35] This is favorite, whether we want to have it be favorited. So that is where we call it right here. We're saying onFavoriteClick, we want it to be false now. And here we want it to be true now. So isFavorite, we're going to swap these two. So do we want it to be favorited? Yes, we do. We will add it. Do we want it to no longer be favorited?

[03:55] No, or yes, that is the case. And so we'll remove it. OK, so that should fix it. Click that and boom, it shoots off to the top, shoots off to the top. Everything is working super well. And now it is sorted the way that our users wanted it to be sorted. Which, you know, it is what it is. So there you go.

[04:15] That is a lifting state. It's not always as easy as like, let's just move this thing up and pass these props. Sometimes you actually got to think through how is this state changing and how is it being stored and how do we have to think about it going forward? So that is some more lifting state.

[00:00] All right, so we've got an interesting situation here. The users want a new feature. If I click on one of these like things, then the sorting here should actually depend on whether a post is liked. So, all the liked posts should show up first,

[00:18] and then everything should be sorted from there, with the liked ones being first. So, this means that we're going to have to lift some state because that liked state right there, that's on the card by itself. We need to lift this up to be managed

[00:33] by the state of the least common parent. So, I guess where the matching posts are, right? Like in that matching post component. So, we need to lift the state up there. That is your job in this exercise so that when users are searching through these and everything, the liked posts show up first.

[00:52] That's what the users want, so we've got to do what they want. Have a good time.

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

Lift More State

Transcript