useEffect

[00:00] So we've got our getQueryParam, we're passing that to our use state, so that's initializing based on that current param. So we just need to get that query param when the user is hitting forward and backward and reset the query to be whatever the query param is after the user has hit forward and backward, right?

[00:17] So like here, we type in cat, hit submit, everything's working fine, I hit back, and now we need to get that query param again and set the query value to that so that it no longer includes cat, right? That's all that we're trying to do here. Pretty straightforward.

[00:33] We're going to add this use effect right here, and you'll notice we have an empty dependency array. We have no dependencies. We aren't dependent on anything to resubscribe to the pop state event. We're just going to subscribe to it the one time.

[00:50] So let's say window.addEventListener, pop state, setQuery, and that should take care of us for now. There are a couple of problems with this still, but this will take care of us for now. So we're listening to whenever the pop state event fires, so the user has clicked the forward or backward button.

[01:08] Now we're going to reset the query to getQueryParam. Now, you'll notice we're actually just passing the function, which is kind of interesting. So use state accepts a function. The state setter also actually can accept a function. So we can pass it the state itself, so we could actually

[01:27] just call it, but we can also pass it a function, and then React will call that function to retrieve the state. So there you go. That works nicely. So we save this, and now if I type in cat, hit Submit, and then go back, oh my goodness. Look at that happening, all because we are now listening

[01:45] for the event and keeping our query updated to whatever the URL says that query should be whenever the user hits forward and backward. So solid.

[00:00] So Kelly, the coworker, improved things a little bit. You could take a look at our utils that's in the shared directory of the repo. And we have this set global search params, which is called whenever we submit the form. And so if I type in cat in here and then hit Enter, that submits the form, not a full page refresh, and updates the search param.

[00:19] So now we can copy and paste this and put it everywhere we want. There's not a whole lot that's special or React-specific going on in here. Feel free to delete this and rewrite it yourself if you want to play a little JavaScript golf, I guess. But the idea is we have a problem. And that problem that you are supposed to solve here

[00:38] is when I hit the Back button, nothing happens. I mean, the URL gets updated because the browser's managing that state. But we are not synchronizing our state with that URL. So when the user goes forward and backward, that is firing an event that we can listen for to know, oh, the user is trying to go forward. The user is trying to go backward.

[00:58] That's called the pop state event. And so your job is to add an event listener to pop state. And you're going to do this inside a use effect. So those are the steps that you need to follow. And you're going to start out with the query being dog, type in cat, hit Submit, and then hit the Back button. And if you've got that all worked out,

[01:16] then you should be good to go for this part of the exercise. You've still got a bug that you might notice in here that we need to fix. And there are a couple other small problems here as well. So we're not totally done. But if you can hit the Back button and the search gets updated to remove the cat,

[01:35] then you should be in a good place for this step.

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

useEffect

Transcript