Check out a free preview of the full State Management in Pure React, v2 course:
The "useEffect & Dependencies" Lesson is part of the full, State Management in Pure React, v2 course featured in this preview video. Here's what you'd learn in this lesson:

Steve continues the refactoring of code using the useEffect hook instead of a callback, and explains that If dependencies are not given to useEffect, it will run on every render of the component. This can become troublesome if the state is changed inside the useEffect hook because it will lead to infinite looping.

Get Unlimited Access Now

Transcript from the "useEffect & Dependencies" Lesson

[00:00:00]
>> So the other thing we saw before was that callback. We don't have a callback either to the set count. We do have another way of doing this. And so we don't have a callback, but we do have the sort of thing called used effect. Use effect and the word effect means something and we think about it as side effects.

[00:00:19] And a functional component is pretty much other than this state hook, functional components before you state, kind of like pure functions, parse one in, component came out. If the same props went in, the same component came out. Now, there is this aspect of state, they're no longer pure, right?

[00:00:37] But if you want something else to happen in this function, then, other than props going in, the state is in effect, technically, under the hood, and a component coming out, you need to use effect because it says, okay here's a side effect. Now anything that is not the return value is technically a side effect.

[00:00:54] We think about side effects in terms of Ajax requests. That's a side effect, yeah, return a component. Also goes on that request. That's the side effect. Console logs are side effects, is return this value but also logs itself to the console and so we need to use use effect in that case.

[00:01:11] The other thing that you will see constantly is that I don't wanna type reactor use state all the time so what I am gonna do here is instead of bringing in component, I will say use state and use effect. Great. And now, what I can do is I can register in effect.

[00:01:30] Now we'll talk about the pieces as I write it. So I'm gonna say use effect and use effect takes a callback. And this dependencies is depth question mark, which is an array. So it is the callback is simply a function like we saw before. In this case, I will say document.title Is the Counter, count.

[00:02:05] All right. So let's talk about those dependencies and we'll kind of, we'll touch on it now. And then we'll like revisit it several times in different contexts, but I want kind of introduce the concept now. If it doesn't pass, if it doesn't hit you on the first pass we'll see more practical examples later on as well.

[00:02:19] If you do not give it any dependencies, this is almost never what you want. If you don't give it any dependencies, it will run on every single render. You're cool, sounds great unless it sets any amount of state, which point that will trigger render. Which will trigger the function which will trigger a render, which will trigger the function, right.

[00:02:49] And then all of a sudden you will learn very quickly how to force quit Chrome. Trust me or you'll actually DDoS your own server like I did last night. All sorts of fun things. So that is almost never what you want. The other option is to give it an empty array.

[00:03:06] Cuz I told you this is a this is an array of dependencies. And what this means is, hey, only run this effect when something I care about changes. Right and if you're saying I don't care about anything when the very not list of you, but to it'll only run the very first time.

[00:03:26] And this seems like what you want but it's also again usually not, right, is very similar to component didmount in this case but usually an we'll see an example later with this kind of blows up in our face like towards the very N one where. Using react router, and when making network requests where the same component is getting different props is not mounting again, but it's maybe fetching a different ID.

[00:03:48] It won't trigger again cuz you said only when it mounts, right which is not what you wanted. So generally speaking, you probably always want to have something here like there's there are cases like we said before, there are cases where you truly only want it when amounts. But for the most part, right, like, you probably want anything that you're using in the list of dependencies.

[00:04:11] If you're using create react app, they install this eastland plugin called exhaustive depths. Right? Which will basically scan your code and it sees, right here, that I'm using count. It's like, hey, you're using count in this effect, so you should listen for when count changes. Cuz if I don't, you'll see it's counter 0, and it's never changing.

[00:04:34] Right, because what we want this effect to do is we want it to run whenever account changes. So if we add count in here 510 15 The other thing I wanna point out is that it also works for decrement and reset. Right before with those class methods we're putting on each one of those methods and could we have done a lifecycle hook for you know, props changing.

[00:05:02] Yeah. But the fact of the matter is we're saying if count changes run this effect. Right, there's no extra life cycle methods, there's nothing along those lines. Should this value change, this is what I want you to do. Right, which is definitely a kind of much cleaner way of going about this.