Effect Cleanup

[00:00] Let's start out by demonstrating the problem. So here we have our use effect. We're adding an event listener, and we're not returning a cleanup. We also have a console log, so we can see when the event listener is being called, and we can add one for when it's being cleaned up. But here we have this huge amount of data that we are logging here.

[00:19] It's 1 million items of an array, and filled with our dog, cat, and caterpillar emoji. So it's just a lot of data. And now if I save that, and let's come over here to our more tools and task manager, and you'll notice we've got all the different tabs

[00:39] that we've got open. And here's the tab that we are interested in. So 73 megabytes, not a little, but it's not terrible. If we open up our dev tools, there's this memory tab that you can go to, and you can scroll down here and see how much of the memory allocated to this tab

[00:58] is our JavaScript objects that we have running right now. So you'll notice it kind of goes up and down as garbage collected and different things like that. But because we have this huge data being allocated, and then we have this function that uses that huge data,

[01:17] and then we never clean up this pop state listener, that function is never garbage collected, and neither is any of the other stuff that it's accessing. And so if I uncheck this, we don't see anything go down by any significant amount. We check it again, and now we're gonna start seeing stuff go up really quick. So I'm just gonna keep going back and forth,

[01:38] boop, boop, boop, boop, boop, and we are allocating a million items in an array with three emojis each. And you'll notice eventually we're gonna take more memory than our entire browser, because it just keeps on going forever and ever and ever. So this is the danger of a memory leak,

[01:56] because you're not cleaning up after yourself in a use effect. We're using so much memory. Here, let's see if we can get to a gigabyte while I explain some other things. So, yeah, it's not necessarily like users aren't gonna come over here and they're gonna say, I'm gonna go forward and backward and forward and backward like a million times.

[02:14] No, it's that you could have 300 of these elements or these React components added to the screen, and if each one of them sets up some sort of subscription and never cleans up or whatever, then maybe an individual one isn't a lot of memory that it's hanging on to,

[02:33] like, oh, these are the variables and whatnot. But all of them together multiplied, yeah, that can add up pretty quick and can result in a slower user experience than you would like, I'm sure, because especially mobile devices only have so much memory that they can allocate to their process.

[02:51] So, it'll just make everything slower by doing this. So, for that reason, it's very important that we fix this. So, I'm gonna move this over. We're gonna refresh the page, get rid of all of that nonsense. We're back down to a reasonable amount of memory, and I'm gonna leave this huge data stuff in there so we can see the effects of what we're doing.

[03:10] Okay, so we're going to extract this event handler and we're gonna call it, yeah, handlePopState. You can call it whatever you want. And then we're going to return, whoops, return a function that removes that event listener,

[03:30] popState, handlePopState. So, the reason we had to extract it to a function is so that we can pass the same function to popState. So, here's the function I want to subscribe to, and now I wanna remove it. That's what's going on here. And with just that change, we can observe the impacts of our changes.

[03:50] We can also, if you want to, we'll add a console.log cleaning up. And that way, we can take a look at our logs right here. We can clean up, boom, there we go. And so, we can see that it is cleaning up. And if we take a look at our memory tab and bring over our task manager again,

[04:09] then I go back and forth, boom, boom, boom, boom, boom. And you'll notice it'll go up for a little bit, and then a garbage collection will happen, and all of those millions of items in that array will get removed. And so, it stays at a perfectly reasonable amount of memory.

[04:26] You'll never get it up to a gigabyte of memory because we're cleaning this up properly. So, that is why cleanup is so important. You're not going to face this a ton, but the other thing that is a problem if you don't clean up is that all of the stuff that's happening inside of this event handler will continue happening

[04:45] even though the component no longer even exists. So, you'll be calling set query on a component that no longer exists. React actually used to give you a warning for this just to say, hey, you might have a memory leak in here, but it resulted in too many false positives. So, they don't really do that anymore. But yeah, this is definitely a situation

[05:04] where you can have a memory leak and you want to avoid that. So, yeah, make sure you're always handling cleanup or at least think about it. You don't always, not every use effect needs to have a cleanup. It's not like a for sure thing, but most of the time they do. And so, just make sure you at least think about it. Like, what needs to be cleaned up here?

[05:23] What part of the external world am I mucking up? How do I clean that up when I'm done? So, there you go. Cleanup, it's important, folks.

[00:00] All right, so we've got a bit of a problem with our current solution with UseEffect, and that is we are not cleaning up properly. And this can cause minor problems, but it also can cause like pretty significant problems. So here with our UseEffect, we've got this callback,

[00:14] and we are setting up our event listener. But if we don't return a function that removes the event listener, then we're going to hang on to all variables that were in scope at the time that this closure was created. And so anything that is inside of the UseEffect, all of the like

[00:31] everything, everything that this function has access to or uses is going to be still hung on to by JavaScript in memory, even when the form or this component gets removed if we don't clean it

[00:45] up. So it's important that we clean things up. So Kelly added this show form thing so that we can test this thing out a little bit, make sure that things are unsubscribing the way that they should. And if you really want to test some stuff out, then in the code, we've got some code blocks that

[01:03] like creates an enormous amount of data in memory. And if you use the memory panel and read up a little bit on monitoring memory usage in the task manager, then you can actually watch the memory just climb and climb and climb every single time you check and uncheck this. So I would actually

[01:21] recommend if you want to do that, to start with that, to see the problem first, and then go through the solution and then compare the before and after. It is pretty interesting. So have a good time with that.

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

Effect Cleanup

Transcript