Check out a free preview of the full Intermediate React, v3 course:
The "useEffect" Lesson is part of the full, Intermediate React, v3 course featured in this preview video. Here's what you'd learn in this lesson:

Brian demonstrates useEffect in a timer example which re-renders every second and answers student questions regarding if the effect will only render once with an empty array, where useEffect can be used, and how promises are handled with useEffect. Effects are similar to the componentDidMount, componentDidUpdate, and componentDidMount lifecycle methods in React.

Get Unlimited Access Now

Transcript from the "useEffect" Lesson

[00:00:00]
>> So when you go into the effect component here. And here in this effect component, you can basically see here that it is just a clock, right? That's basically what you can see here. Use affect example time and to local time. Why is this not sticking in toggle word wrap?

[00:00:19] Thank you, okay. So I have a state here you state, it is the time and it starts out with the current time. You can see wherever I am at the moment it is currently 10:00 AM. UseEffect here basically what I'm doing, is I'm scheduling something to happen after the first render, and then I can tell it how often that I want to rend or be called thereafter.

[00:00:46] So in this particular case, useEffect this function gets scheduled to run, right? So this does not happen immediately, this is gonna render first, then some other stuff might happen, you don't know and then it's going to run. But the key here is that you're not gonna be precisely sure of when it's gonna run.

[00:01:06] And we'll get into another one called use layout effect, where you actually will know when it's gonna run. But suffice to say this will run basically from your perspective immediately, right? Like it's gonna run within milliseconds very likely. But you're not positive will other things be scheduled before then, okay?

[00:01:28] And the question that you might have there, is well, what if I want to make sure that it does run immediately afterwards? That's what use layout effect is for, and we'll talk about that here in just a second. So here I have a timer, I set a timeout, and it returns after one second, right?

[00:01:43] And all I'm doing here, is I'm setting the time here which causes a new re-render which then schedules another effect, right? So that's how it's happening, every single time is scheduling a new effect after a re-render, right? Cuz remember the dependencies here, right? If I did this and I put this empty array here, which means it has no dependencies, notice this now has stopped counting, right?

[00:02:08] Because it stops scheduling the timer to go off. But again, if I take that out, now this is gonna start counting again. Just pretty cool. Now you could put in here and would probably be more accurate if you put timer in here, or time sorry, not timer. And notice this would continue working as well.

[00:02:32] You're basically saying like, hey, only reschedule this whenever time changes. And by leaving it off, you're basically saying, hey, when anything changes, please schedule a new effect. I think if I had the react hooks eslint, it would actually tell me to put time and set time in there.

[00:02:53] Cuz basically it's gonna say, hey, anything that you reference outside of the body here, I need that to be a data dependency here.
>> If you have an empty array that is telling it to just do it the first time and then never again?
>> Yeah, that's a good way to think about that.

[00:03:10] If I put an empty array here, it's gonna do at once after it renders for the first time and then never again. It's basically component did mount, if it's effectively component did mount. It works a little bit differently, but effectively it's the same. The nuance there is miniscule.

[00:03:28]
>> Can you explain where we can use useEffect? I understand the useState thing, but the useEffect I'm not understanding where we can use it? Any practical example use of it?
>> Yeah, so useEffect I will say is probably gonna be your second most used hook after useState. So anything that needs to happen outside of the normal render cycle, so anytime you need to request something from an API, anytime that you need to subscribe to a WebSocket.

[00:04:06] Anytime that you need to alert the user something probably even like that you can use as useEffects. So anytime that you basically want to schedule something to happen, that's not gonna be inside of a render cycle, you're gonna use an effect to do that. And I'll just go and say primarily, you're gonna use it for APIs, right?

[00:04:27] Like if you're gonna make like a fetch request, you're gonna do instead of an effect. Here I use the set timeout, so timeouts and those kind of things also would go into effects as well. So if you wanna schedule a component update, like every 30 seconds, you use an effect to do that.

[00:04:46] But like if I want to request something from the API, let's go ahead and do that really quick. So if I come in here and I say const obj = await fetch, and we can use that API that we used from yesterday. So, petsv2.dev-API. Let's see, I don't even need that.

[00:05:27] So and then after that I need to async. So here I'll call getpets. And const json= await objects.json. It's probably blocking requests outgoing from here. But suffice to say, this is how you're gonna do API requests. And you can look at this from the complete intro to react as well.

[00:06:16] You'll use an effect to render something for the first time and then schedule an effect afterwards so that you can go and fetch stuff from the API. And you can use that here out here like say, setpets to be whatever came back as json. Does that make sense?

[00:06:36] We go over this in depth, there's actually a section in the complete intro to react to these six called useEffect. And that actually goes into that in depth, so you can see how we do that from the confines of the project. Cool, other questions?
>> So useEffects cannot be async itself, correct?

[00:06:57]
>> Yeah, I think if you try and say async here, it's gonna say, hey, I didn't expect promise back here.
>> If you were using an API within, you would do the pattern that you did and handle that promise within the other function?
>> Yeah, you're you have two choices there.

[00:07:19] You can either just handle the promises directly in here and say fetch blah, .then.then, and you can do it that way and just manipulate the promises directly and that's fine, I've seen people do that. I like using async await, so I'll just make another function and then call it from within there just like how you saw.

[00:07:39] Line eight here is how you clean up after yourself. Whenever something like so, for example, if I removed this effect from this useEffect component here, I'm still gonna have that timeout happening, and it's going to try and update something that doesn't exist which is gonna cause an error.

[00:07:59] So you need some way to clear the timeout after this component gets removed. Now, obviously, this is not gonna get removed anytime soon cuz we have no mechanism to remove it in our application. But if it ever did get removed, we'd have to clear that timeout, right? And so that's what this return function here.

[00:08:16] You're basically just returning, hey, if this gets removed, here is how you gracefully clean up. In a class component this would be a component did unmount, that's the same kind of thing, it's the same idea. So it makes sense? So yeah, you just return a function here at the end of any effect and you can allow that to clean up after yourself.

[00:08:39] So in this case, the timer here, which is the return of the set timeout, all we do is just say, hey, don't run that timer, you've just run clear timeout and it'll prevent that timeout from executing at the end. You don't typically need to clean up your effects, right?

[00:08:55] If you're making an API requests, you just don't do anything about it, which is fine. It's only when you specifically like, I think timeout are one of them and subscriptions, right? So if you're doing rx-json and you need to dispose the subscription, that's another place that you would definitely wanna do some sort, or like WebSockets.

[00:09:16] So if you need to unsubscribe from updates, those are the kind of scenarios that you would do with these cleanup functions.