Hi and welcome back.
Today we're going to be discussing a hook called Use Effect.
You're now looking at my screen with my editor opened,
my simulator running, and my Metro bundler's running as well.
And we just see the Hello World Start
application that we designed in the beginning of our course.
Because I just cleaned up my code so that you can understand how Use Effects work.
So sometimes there comes a time when
on change of data, you want to follow up with an action or
whenever application renders you want to do something right after then.
So if that's the case for functional components, you could use Use Effect Hook.
To use Use Effect Hook, you must import it from React, right here.
And then let's discuss.
How does using use effect hook look like?
So if you want to use Effect Hook, you're going to have to basically
a function that is executed and you can determine when this function is running.
For example, if you want this function
to run right on the components render, you can pass it an array that is an empty
dependency array that says that on the components render run this function.
So for example, if we were to console log
here, the component has rendered and save it.
If we go to our terminal and reload our
application, we're going to see that the component has
rendered console log is right inside our terminal.
So what is this dependency array exactly?
Here you can pass some kind of variables
and you can say that on that variable or data change -
run this function.
Now since this is empty, it will run on render of the screen.
So if I were to just simply place a space here and then save it,
you're going to see this pop up here again.
So every time this component renders, this function will run.
Now what if we want to run this function when some kind of data changes?
Since we already know what useState Hook
is and how it works, we could use useState to define a variable.
So let's do that.
Let's create a new variable and let's call it text.
And then let's create a setter for it
and let's useState here and then just give it an empty string.
Now let's create another use effect here.
And let's say that whenever text changes,
we want to console log the text has changed.
Now we're going to observe a very interesting thing in our terminal.
Okay, so let me open it up.
Great.
So here if I reload my application, you're going to see two console logs.
First one is going to be that the text has
changed and second one is going to be that the component has rendered.
But you can argue that we didn't really change any kind of text.
Now if you have some variables set here and you use useState to set them,
useState will set this text variable to the empty string.
From a nonexistent value on Render because
text value didn't really exist and now it has a value.
You are still going to see this shown here.
However, let's say that onpress
we would like to set text to something else.
Let's say it's going to be hello, world.
I just used use effect hook. Right.
Let's save this and then let's reload our application.
You're still seeing these two logs appear here.
And now if I were to press here, you are going to see this appear here again,
because the value of the text has changed.
To just make it more visible that this value changed, we can just use the text
variable here and we can reload our application.
And since now our text is actually
an empty string, we don't see anything here, so we can't click on anything.
I'm just going to change the text variable as well.
And I'm just going to give it the value of Hello World.
Great, let's save this.
And now we do see the Hello World appear here.
Let's reload the application.
We have these two logs and I will click
here, you will see the text change and you will see the follow up log as well.
Now, if I click here again,
you are not going to see any more logs pop
up because the value has not really changed.
The value is still same.
So it doesn't matter how many times you're going to click
since the value of the text variable
hasn't changed, this Use Effect Hook will not run.
Now let's say that we set our text to be zero
and then every time set text is clicked, we add one to this text, right?
So this is zero.
Now, if I were to reload our application, we're going to see these two logs again.
And if I click here, every time I click here,
since the value is changing, you're going to see this pop up here.
Now, since you already understand how Use effects work and that they run as a side
effect of some action happening, and we can track the variables and decide
which use effects to run according to that, let's talk about normally
when would you use use effects?
You could use Use Effect Hook for fetching
data from an API whenever some kind of action happens here.
For example, if user presses on a book
that they're interested in your application, you could call an API
and fetch information about that particular book.
You could use it for string up timers or intervals to perform some task
for example, every x seconds.
You could use it for subscribing to events
such as whenever a scroll event occurs on the screen.
The main point here is that by using the Use Effect Hook to manage side
effects, you can keep your components more modular and easier to reason about.
The Use Effect Hook allows you to separate your concerns and keep your rendering
logic separate from your side effect logic.
I hope this class was useful for you.
Thanks so much for watching.
And in the next video, we're going to discuss use ref hook.