This course has been updated! We now recommend you take the React Performance course.
Transcript from the "useEffect & Cleanup" Lesson
[00:00:00]
>> There's one more thing with user fact that we need to consider, which is with our life-cycle hooks, we have component did mount we also have component will unmount, right? And that is good for anytime we're setting up something that recurs, like I said interval or a web socket connection.
[00:00:17] Anytime you set up something that persists, you need to clean it up as well. So here's a fact gives us an API for doing that, right? And what it does is we have like what the function is. And then if it does return a value, right, that return value will be called afterwards, right?
[00:00:37] And we'll start out with a super trivial example. And later on, we'll actually see a different one. So, let's go ahead and we've got all of this. We go ahead and give ourselves a way to add additional counters and remove them. That way we can mount stuff to the page and unmount it, right, so we'll start out in here we'll say set interval.
[00:01:04] And this actually works pretty well. We'll say, what amounts to the page, start doing that and let's do every three seconds. That seems good. So effect there, cool. Those three seconds were just longer than I had patience for.
>> [LAUGH]
>> And you can see if we increment it.
[00:01:38] Now, you'll notice that we're getting 1 and 0, right? Cuz as the count changes, it registered another interval, right? So we're getting 1, 0, 1, 0, 1, 0. If we added multiple counters on every state change, it would register another interval. It's never actually cleaning up on itself.
[00:01:57] So we actually don't need to even add multiple counters in this case. We'll see it, if we increment a bunch more times. Do it like this. Let's just do a whole bunch. What could possibly go wrong? Every single iteration and render of that registered its own set interval and never cleaned up.
[00:02:14] Right because it each slice and time thing that we're talking about before. So it's one of those things where it works as far as we know. And this is a console log. Now imagine it was actually like sending a network request instead, or registering a web socket connection, right?
[00:02:25] Those more like subtle things that come to bite you. So all we have to do is clean this up. We do this real quick will actually give it a set interval returns a number which is the idea of that interval. And then we can return a function that is clear interval without ID.
[00:02:52] Now you can hit a bunch of times. Now we'll just get the most recent one. Now we're cleaning up after ourselves. So as well those subtle things like missing a dependency, we can accidentally DDoS your server. It's also a way that you can accidentally make a mistake. We didn't get an error message.
[00:03:07] Nothing yelled at us. Right, but it wasn't the effect that we wanted. So use effect gives us the ability to define dependencies. That way it will and will not run. It also gives us the ability to clean up after itself, right? In this case and so we were able to do that well.
[00:03:23] All right, so we've really at this point, we've gotten to all the API differences between this SS state and U state. We've gotten the API differences in between component did mount and will mount the lifecycle hooks and use effect. We're gonna kind of switch gears and I'll talk a little bit about like a, application that has multiple components, and how we end up passing stuff down and through, and some ways that we can solve that.
[00:03:45] We're also gonna talk about the fact that having a function for basically having to set every single state property, using its own function can get a little bit tedious. We're gonna see that multiple times. We're gonna see that when we want to set the loading, or the error state of an AJAX request, or when we want to have a form with multiple values, right?
[00:04:06] Having a stack of those, setCount, not bad. Having a stack of them is slightly problematic. So we'll look at some now more advanced ways of doing that. Use state will work for very simple values, but as things get a little bit more complicated, you might wanna use other patterns.