Lift State

[00:00] All right, so let's get started. The state that we need is the query right here. Matching posts is set to query empty string because we don't have access to the query here anymore. The form is the one managing the query and that's just not enough. We need to move it up. So we're going to move this up here,

[00:18] and now we can pass that query to matching posts, and we also need to pass the query to the form now. So query and set query go into the form. We don't need to bother passing set query to matching posts because it doesn't need to ever change the query. It's just the form that needs to do that.

[00:35] So now we need to update the props here to accept query and a function for updating that query. So set query function, you can type that however you like. Then down here, we have this use effect that depends on this set query,

[00:52] and honestly, I think it actually makes more sense to just move this up to the app. Because the state management is now happening inside of the app. So you could make it work inside of the form, but I think moving it up to the app makes plenty of sense.

[01:09] So with that now, we have successfully moved things up and we are filtering down as we should. I see things as they go, dog and cat, and everything is working the way that it should. Things are getting filtered properly, even post refactor. So this is lifting state. We had two components that both needed

[01:29] access to state that was stored in one of them. We took that state, moved it up, and everything for managing that, and then passed down the necessary props to the individual components and there you go, now it's working.

[00:00] Kelly did a little bit of refactoring for us so that we can have these favorite hearts in here. But in the process of the refactoring, we actually broke this experience of actually filtering. So your job is to fix that experience so that we can filter again as we were before.

[00:16] And you're going to have to do that by lifting some state. 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

Kent C. Dodds

React Fundamentals

Advanced React APIs

React Suspense

Advanced React Patterns

React Performance

React Server Components

Interviews With Experts

Epic React Pro

React Hooks Intro

Intro to Managing UI State

useState

Controlling Inputs

Derive State

Initialize State

Init Callback

Dad Joke Break Managing UI State

Managing UI State

Intro to Side-Effects

useEffect

Effect Cleanup

Dad Joke Break Side-Effects

Side-Effects

Intro to Lifting State

Lift More State

Colocate State

Dad Joke Break Lifting State

Lifting The State

Intro to DOM Side-Effects

Refs

Dependencies

Primitive Dependencies

Dad Joke Break DOM Side-Effects

DOM Side-Effects

Intro to Unique IDs

useId

Dad Joke Break Unique IDs

Unique IDs

Intro to Tic Tac Toe

setState callback

Preserve State in localStorage

Add Game History Feature

Dad Joke Break Tic Tac Toe

Tic Tac Toe

Outro to React Hooks 

React Hooks

React Hooks

Transcript

Lift State

Transcript