All language subtitles for 049 useEffect - Dependency List.en_US

So in the previous video, we covered how we can set up a conditional inside the use effect callback

function.

Our question still remains, is this the only possible setup where our usufruct runs after every event

and by default?

Yes, that is the case.

However, you can also notice the two comments that I left here.

One is the cleanup function.

Something will cover the next video.

And I would want to talk about the second parameter.

So what on earth is that?

And essentially second parameter is something that we can add here as far as the user.

So we have our function.

So that is the functionality that will run every time we call the user.

But as far as the second argument, we can also pass it here a array, and that is the array of dependencies.

So essentially that is called a list of dependencies.

And if we leave this blank, that just means that it will only run on the initial render.

And I noticed something interesting where as far as our logic, it technically is looking for the value

if it is bigger or equal than one.

Correct.

So it will run on the initial runner.

And then we have a statement, of course.

So essentially, once we say this shouldn't update the title originally.

Right.

Because we have or if condition, however, we did call it, we can clearly see that, yes, we have

call.

In fact, that is, of course, coming from the console.

Now, the first time I click noticed something interesting where I clicked, I updated the value.

But since I have that second argument, I have that dependency list and I have nothing in there.

Essentially, it is empty.

It only runs on the initial render.

And that is something very, very important that you should remember.

So if you only want that user to run on the initial render, you just add that second argument and you

would pass it as a empty.

All right.

That just means that it will run on the initial render.

Now, the second question probably is, well, can we add more stuff in there?

Because it's fine.

All right.

It runs on the initial render, but maybe I would want to run it each and every time I change some kind

of value.

Now, what that value could be, we're here.

We could maybe run it each and every time we update that value.

So let's try it out.

So in here, in the dependancy, right.

We just pass and whatever name is for our dependency.

So in this case, of course, it is the value, if it would be you perhaps in text and hopefully you

get the gist.

So now once I say it again, it runs on the initial render.

That is beautiful.

But now you'll notice that we'll also run once we increase the value.

So once we increase the value, we change something about alleged dependency.

And then the moment we change something about that value, of course, then we trigger use effect to

run one more time since independence.

You're right, we have this value.

So each and every time we'll change something about this value, essentially we will run the use effect

as well.

So that's something to remember.

Or by default, if you have no dependency or the user effect will run each and every time the component

gets re rendered, including the initial render that if we set up the second parameter, the dependency

array, as far as the empty list, meaning and the array, then of course it will run only once we render

a component.

And then as we start adding different values here as far as different dependencies, then each and every

time that dependency will change, if it is added to an array, then also use effect will run.

And one more thing that I would want to add is that you can have as many used effects as you want.

So, for example, in this case, we have one use effect that will run on the initial render and also

when the value changes.

But nothing stops me from setting up another one.

And then again, I have my callback function and in this case I will just set it up to be on the initial

render.

Now, I'm not going to do much.

I'm just going to go with a simple console log and I'll say Hello World.

And what you'll notice is that, yeah, it runs on the initial render, just like the previous use effect

of we have.

However, even though we're on the second time.

So each and every time I'll click on a button, you'll notice that you use a fact.

The second one will tell the world doesn't run because the value is not in the dependency list.

Hopefully that makes sense.

And now we can talk about the clean up function.