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. All right, cool. So we're
now on my computer screen an
d 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
effec
t, 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 ve
ry 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. 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 r
un. 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 firs
t side effect.
So this is the most basic form. This is how you get a side effect without actually doing anything.
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 pa
rts. 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. 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 i
s 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. 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 t
o 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 telli
ng 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 locked, 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, i
ncrement 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 lock the count, it will perform the side effect as we told it to. Cool. So there we have our
useEffect, it is fully functional. Now there is this optional
ret
urn 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 w
e 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 to
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 a
fter 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 optiona
l
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 u
seful
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 t
hen this is component did unmount, sorry, 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
th
e 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 n
ext video.
Comments