This course has been updated! We now recommend you take the Intermediate React, v5 course.
Transcript from the "useEffect" Lesson
[00:00:00]
>> Brian Holt: Next thing let's go do is useEffect, I believe is the next one, yeah, useEffect. So it's effect.js over here.
>> Brian Holt: So here, I'm importing React, useState, and useEffect. First thing is I'm setting up the time, which every single time this is a new Date, right, a new Date object from JavaScript.
[00:00:22] Then I set up this useEffect, which this function is not immediately run, right? It's delayed. So it's gonna finish rendering first, and it's scheduling this to be run later, okay? So then this renders for the first time, where time is just going to be the default value right here.
[00:00:40] And this useEffect is not yet run on the very, very first render, okay? Then after this finish renders for the first time, it calls this useEffect. Or rather, the function that you provided to this useEffect, okay? And here it sets a new timer to run this effect again.
[00:01:00] Sorry, this setTime again to a new date in 1,000 milliseconds, okay? And so that's what it's doing every single time. Notice this is using set timeout. This not actually using setInterval, right? Because it's rerendering every single one second, which is always scheduling a new timeout, right? Now, you could do this with setInterval as well, right?
[00:01:26] But I wanted to prove to you that it's constantly scheduling this, right? And this looks like it's running every second, right? So it's predictably doing this every second. Does that make sense?
>> Brian Holt: Now notice that this has no second parameter. That means that every single time this render happens, it's scheduling this to run again, right?
[00:01:47] So this effect runs every single time that this timeout changes. I can say empty array here. And all of a sudden, notice that this stopped updating, right? Because I gave it a list of dependencies and I said this has no dependencies, so only run this on the very, very first time that I run this.
[00:02:08] Which is what it did, right?
>> Brian Holt: So now it's only gonna run once and never run again. As soon as I take this out again, notice it'll go back to running every single time.
>> Brian Holt: Now, what I really should do here is you see that I call setTime right here.
[00:02:33] According to the React team, you should make this a dependency that says if setTime changes,
>> Brian Holt: Which it won't, cuz it's a function that's provided to you by this hook here. So this'll never change. So but according to the React team, they still think this is a dependency, so you should put it there.
[00:02:50] So I say they know what they're doing, they wrote it. So put setTime here as a dependency. Cuz notice this still works the way that should, maybe it doesn't.
>> Brian Holt: You know what? That's not true either. So it really should be time, because time is the contingency here.
[00:03:09]
>> Brian Holt: That's true.
>> Brian Holt: In any case, we always want it to run every single render because that's what this component does. So I would just leave this empty, actually. Now, you notice here that it's returning a function that calls clearTimeout. Because timeouts, if you don't clear them, you can potentially have weird bugs where I have this useEffect thing, and then I unmount it.
[00:03:38] And it's then going to try and call setTimeout, or rather, setTime again on an unmounted component, and that's bad, right? So here what I do is anytime that this runs, it grabs this timer. And if this gets unmounted, it'll clear the timer, right? So this function will get run, this is the clean up function.
[00:03:59] So if you're doing AJAX requests here, you could cancel the request. If you're doing something like integrating with jQuery, you could clear up RD3 or something like that, you could clear up all that stuff. So this is where you clean up with effects.