 Hey, so it's day 21 and you might have noticed if you're following along with the emails that I didn't send one yesterday. Now part of that is because I was, you know, out with my mom and my grandma and we were kind of enjoying some time together and I didn't do it. That's part of it. But the other part is that I was feeling really conflicted because I had only given half of the information that you needed to be successful with hooks and it felt incredibly irresponsible to, if I was going to just send that one email or maybe you only read that one email and then you didn't read the next email because you felt like you knew everything about it, you're going to have a big problem. So I wanted to just send it all together so you can have all the information that you need to be successful with hooks. So that's why this is two videos but only one email. So today is day 21 and I don't know if you can hear it but my computer is just sounds like a jet engine running this project. And one of the reasons is because this effect that we have created is running every single update. So we're binding a crap ton of ad event listeners. So just a recap, yesterday we took use effect, we pulled that name export off of the React module, NPO module, whatever package and we used that to set up this effect which binds an ad event listener for resize and it calls this set state hook updater with the new window width. That use state hook is defaulted with the window width as the page loads. It gets returned here and used. Now we opt into the updates by calling this function. So when this function gets called, it's going to update that width and then this gets re-rendered. So that's why every time we move this around, the number updates. Now the problem is, is that when we are doing subscriptions like this, we also need to handle the cleanup. So when you do a subscription, you need to remove the subscription. That becomes critically important in this with hooks because unlike we've had with classes before, there's this concept of on mount and it would just happen that one time, the first time the component rendered. That is not the case with hooks. By default, this is going to, every time the component renders, it is going to add a new event listener. So we need to be very careful about making sure that when it adds a new one, it removes the old one. Again, adds a new one, removes the old one. That those happen in tandem for every update. So this is how you add do the cleanup. You return a function and that function is going to do the opposite of whatever you did in the setup. So it'll call this for the setup and then it'll call this return function for the cleanup. So that might, that would look something like this. So we'll have document.remove, whoops, event listener. It's going to unsubscribe to resize events. And it needs to call that, let's see, this function. Now, here's the thing. We need to actually create a reference to this function that can be, can be the same reference when it's added and removed. So we do that by creating a new variable. So we use let for this. And let's change this to the handle, was it handle resize? Okay, so we'll do let handle resize equal that. Now, in both places, we can actually change this reference. Okay, cool. So that all saved. Now for every update, it's going to add the listener. And then as it updates the state, it's going to remove the one that we added. And then it's going to add a new one. So that's what's happening. And now we can see that the effect is still the same. But now we're doing all the cleanup requisites for like performance. We're just adding a bunch of add event listeners every update. So there we go. Go in peace. Enjoy using these now that you know how to use these responsibly. It is worth noting that this is really only important for subscriptions. So if you had a use effect that just updated the document title, did something like document title equals something else. If you had something like that, that's totally fine to do in use effect. It's going to run every time. But it is just going to do its update. And that's fine. You don't have to unsubscribe or remove an event listener in that case. So that's awesome. Thanks for watching. Have fun with these. Use effect is amazing. I definitely recommend going through and reading this entire document on the use effect hook because there's a lot of stuff that I'm not covering. This is just like the surface. There's a lot of ways to customize this hook for your purposes. That's it. Tell me if you'd like to learn more about hooks. I was thinking about doing a little mini course kind of like this one on hooks specifically. I have some material on that and I can show you. Anyway, I'll tell you about that later.