Intro: Mastering useEffect
Welcome to the last useEffect tutorial you're ever going to have to watch.
I promise you after watching this video, you're going to know everything there is to know about useEffect.
You're going to know how to use it, when to use it, how it works, and you're going to be able to go out and teach this to someone else and look like a senior developer.
Does this sound good to you? Cool. Let's jump on my computer screen and learn about useEffect.
What is useEffect and side effects
All right, cool. So we're now on my computer screen and I have here a very simple application that I'm going to use to teach you how to use useEffect in React. So first useEffect. What is it? Well, it's a hook from React that is used to perform side effects in our application.
Side effects, you can really think about them as the name implies, as things happening as a consequence of something else. You can think about this in terms of medicine, right? You take some sort of medication that has an intended effect, and then as a byproduct of that effect, you get some side effects. In code, it's the same thing.
Something happens in our application, something changes, something gets triggered. And as a side effect, we have something else that happens. useEffect in code is used for side effects.
And to keep it simple, in most applications, side effects are going to be a result of state changing. You have some state in your application, it goes from one value to another, and that causes a side effect to happen that you can control. That is also very important because unlike medication, you can control what the side effects are, and what they react to. That is the beauty of code, you get to have complete control in how you structure your state and your side effects. Cool.
Building the counter example and first useEffect
So with that being said, let's actually build our first side effects. So this application, as you can see, is really, really simple. It is a simple counter application with a button to increment and a button to decrement. This works as expected. And this is the code for this.
In this application, all that we have is state, we have nothing else, no side effects, all that we have is some piece of state or count, and then another updater function that updates the count variable. That is a very simple application. And now we're going to add introduce our first side effect. So how do we think about side effects, right? We want something to happen as a result of count changing. Because as we've said, useEffect is used whenever you want to trigger something, when some piece of state changes. In this case, the only thing that can change is our count. So we're going to react to the count using a side effect using useEffect.
So what I'm first going to do is I'm going to show you how the structure of useEffect works. And then from then, we're going to build slowly and add our functionalities to our side effects. So I'm going to import useEffect from React. Like so. And then I'm just going to write the most simple form of useEffect without giving it any code to run. So that looks like this: useEffect, and then open a parenthesis, open an arrow function empty for now, because we don't want any code to run, put a comma, and then give it an empty dependency array, which we will talk about in just a moment. With this, we have created our first side effect. This is active, it is doing something. But actually, it's doing nothing. It is running this empty function, which does nothing. But the hook itself is now fully functional. And we have technically our first side effect. So this is the most basic form. This is how you get a side effect without actually doing anything.
Parts of useEffect: callback, dependencies, and cleanup
Before we actually add some functionality to this, I want to outline the different parts of useEffect, because they are very important to understand. And each part has a specific purpose. And you need to understand all of them to get the full picture of useEffect and how it works. So what I'm going to do is I'm going to just describe them to you, add comments in the representative parts. And then we will then add code and actually build our side effect.
So the first part of useEffect is the actual code to run, which will be inside of the curly brackets here. And that is the code that we want to run. So what I'm going to do is I'm going to say the code that we want to run, right, pretty simple. The second part is this dependency array right here. Now this is very important, because this is what you use to tell useEffect what it should listen to, what it should react to, what it should listen to, to run this code here. If you don't provide it anything, it will not listen to anything. And then it will not do the behavior that you might want. So I will put a comment, the dependency array.
And then there is another part to useEffect that currently is invisible to us. But that doesn't mean it doesn't exist. And it is invisible because it is optional, you don't have to provide this, but it is still part of useEffect. And it is also a very important part to this. And that is the optional return function. So what I'm going to do is I'm going to put a comment here and say optional return function. So with this, I'm going to leave the space here. So with this, we have our useEffect, we have the three parts of the code of the hook. And now we're going to actually start implementing some code to see how this works.
Logging count: dependency array and mount behavior
So what do we want to do? We said that we wanted to react to count, we wanted to do something when count changes. The simplest thing that we could do here without actually adding some complex functionality to our simple app is to log in the console, the count as it changes, right? That's simple enough. Whenever count changes, we want the side effect to be a log on our console that shows us what the count is. So to do that, we're going to add this console log in the part of the useEffect where it says the code that we want to run. So I'm going to go here, and I'm going to put console.log, and then I'm going to say the count is colon, and then pass the count here.
And then if I save this, and then I refresh, and then I open my console, you will see that we have something logged. The count is 0, which is great. This is the first step to getting useEffect to work.
Now something very important here is that we haven't given anything to our dependency array. And we haven't added any extra configuration to useEffect. And it's still ran the code, it's still ran this piece of code. The important thing that you need to understand about useEffect is that no matter what you provide in the dependency array or how you provide it, it is guaranteed to run at least once. And that is when the component mounts. So when the component mounts, this runs, it is guaranteed to run at least once with the code that you give it in the body. And you can see it right here, right? We have our application, I reloaded the component mounted, and then we had a console log that the count is zero. That is very important to understand because you need to know that you're guaranteed to have this run at least once on mount. And there is no way around this using just useEffect. Cool.
Adding count to dependencies and effect lifecycle
So now let's look at what happens if I press increment. I'm incrementing and the count is +1, the count is 2, the count is 3 but nothing is being logged on our console, which is wrong because we want our console to log the count every time that it changes. The reason for this is we haven't provided anything to the dependency array. Remember how I mentioned that this dependency array is used to tell useEffect what it should listen to. And what variables it should react, which means what should I listen to to run this code here. If you give it an empty dependency array, it is only going to run that first initial guaranteed time. So to fix this, all that we have to do is add count in this dependency array. And also before we do that, I want you to look that if I hover over here, you'll see that VS Code or any editor that you're using will probably have this, it's going to warn us that react hook useEffect has a missing dependency, 'count'. Either include it or remove the dependency array. This is telling us that hey, you're doing some code that is dependent on count, but you haven't provided it in the dependency array. Are you sure that this is what you want to do? And in this case, it is correct, right, because we want to log our count as it is being updated, but we haven't provided count in the dependency array. So the editor is being helpful. And it is telling us that, hey, you should maybe add count to the dependency array. So to fix that, we are going to add count to the dependency array.
There you go. Now if I just do a clean refresh so that we have a fresh start, you'll see that again, the first time it is logged, it doesn't matter that I now put count in the dependency array, it is guaranteed to run at least once. And then when I press increment, it is going to increment the count and log the count here, 1, increment again, log the count, 2, increment again, log the count, 3. Our useEffect now works as we intended to. We gave it count, we gave it some code to run. And now this useEffect is hooked to the count. And whenever the count changes, either by these buttons or some other part of the code, it doesn't matter, all that it cares about is that when count is different, it will log the count, it will perform the side effect as we told it to. Cool. So there we have our useEffect, it is fully functional.
Cleanup function, when it runs, and lifecycle mapping
Now there is this optional return function that I talked about, that we haven't used anything. Well, it's fine that we haven't used it because for one, it is optional. And for two, in this simple example, we have nothing to clean up, right? This is the cleanup function. And I'm going to show you how this works, because it's very important, because in some cases, you do need to have a cleanup function, and you do need to understand the lifecycle of useEffect, how does useEffect run its code, and what is the order in which it runs the code.
So what I'm going to do is I'm going to put another console log in the cleanup function, and show you how this works. So I'm going to do return, and then open an arrow function again, do this, and then in the body of the function, I'm going to put console.log. And then I'm going to say I am being cleaned up. And I'm going to save this, save and then refresh. So I now have a return function, which again is optional, I didn't need to put this and our code doesn't depend on it. But we have this console log, which I'm using for demonstration purposes. Look what happens when I click increment.
You see, before the count, the new count, before that's being logged, I get I am being cleaned up. If I press it again, I get, I am being cleaned up again. And then the count is 2, press it again, cleaned up. And then the count is 3. Why does this happen? Well, this is where we have to understand how useEffect works. useEffect will first run the code on mount of the component, whatever it is inside. As we can see here, the count is zero, that is going to be logged guaranteed at least once on mount. And then if you give it a dependency array, whenever something in that dependency array changes, the useEffect hook will destroy itself. And it will run this cleanup function before doing so. And then it's going to be recreated with the new value. That is how useEffect is able to log the new value every time it's being updated, because it is being destroyed, it is then cleaning up after itself. And then it is rerunning with the new value.
This is very important because this is how useEffect works. And by extension, this is generally how React works under the hood. Everything depends on renders. And everything is a function of the render. Every render, the state has a new value, all the hooks are reset with that value. And then they perform the code with these updated values. So that's what you're seeing here. Now, in this case, like I said, we didn't need to put an optional function because there is nothing to clean up. But you can think of some other use cases where maybe you have a timeout that you started here that depends on some value. And then when that value changes, you need to clear the timeout. Because if not, you're going to create a new timeout whenever the hook is being recreated. And then you're going to have two timeouts, and you're probably going to have some bugs in your application. So this return function is useful for clearing timeouts. It's useful for unsubscribing to things, if you have an event listener, and you want to listen to something as it changes, you want to unsubscribe to it when it's no longer needed, when this component is destroyed. And you can think of 1000 other cases where you might need to have a return function. But again, in this context, we didn't need to. And one more thing that I want to mention is that if you didn't provide anything in this array, this return function, you might think that it never runs, but it actually still runs. But this time, it runs on unmount of the component. Because when the component unmounts, this effect is no longer needed. And you might still have a timeout, you might still have an event listener or something that needs to be cleaned up.
You can really think about this if you've heard about class components in React or even use them. You can really think about this as component did mount, right? you're guaranteed to have something run whenever the component mounts. And then this is component will unmount, which is the code that is run right before the component unmounts. This is the functional equivalent to that. Cool.
So that was useEffect. Now you're able to go out and use this in any application that you work on. And I guarantee you, you are going to have to use this because this is a very fundamental hook in React, this and useState, so you're better sure to learn them and understand them properly. And like I promised you at the beginning of the video, you're now able to go out and teach this to somebody else and look like a senior developer.
If you've enjoyed this video, make sure to leave a like and subscribe because it really does help me out a lot. I'm going to be posting a lot more of these types of videos in the future React tutorials in all shapes and sizes. They're coming. Don't worry. My name is Darius Cosden. This is Cosden Solutions. Thank you so much for watching once again, and I will see you all in the next video.
