Let's write out some more Škoda around our U.S. Factbook and understand when the code inside this function
gets executed.
I'm going to update the console log right now.
I'm going to change it to I only run once.
Like, so you'll notice that the second argument to the U.S. fact function is an empty array.
That means we go back to our little diagram right here.
That means that the arrow function we are providing is only going to be executed one time at the initial
render.
The console log I have inside of here kind of makes a lot of sense.
I can also add in another console log right above.
It says, I run with every render.
So any time that we change our term piece of state, our component re renders.
That will cause this Consolo right here to be executed.
And we should see I run with every render appear.
Every time this component gets re rendered.
Let's try to save this back over and see what happens.
Now, I can see I run with every render.
So that's the console log that we put inside the component self.
And here's the console log from the use effect function, but only ran that one time.
If I start typing into the input, I'm now re rendering the component with every single key press.
I see the I run with every render.
That is evidence that the component is re rendering.
But we do not get any additional console logs from use effect.
Let's try to change that.
I'm gonna go back over.
I'm going to remove that array entirely and I'll update the cons log two, I run after every render.
And just be really precise, we'll say, and at initial render, let's be really precise.
So without the array as the second argument, without any array at all.
We are now running at the initial render and after every re render, let's save that file, do a quick
test.
I can see I run with every render and then every render and initial.
So it just ran on the initial.
Now we can type inside of here and every single key press we see of the components re rendering and
use, the fact is running as well.
Now, the last Nerio is that we have an array with something inside of it.
In this case, we'll put in term.
Now, term being put inside of here is going to give us a little bit misleading effect when we put in
term or anything inside that array.
Remember, that means you want to run at the initial render and after every re render, if that data
has changed.
Well, in this case, the only way that we can rebrand or are component is if term changes.
So this right now with turn right here is going to appear to have the same effect as no array whatsoever
because it's going to run this use effect function any time term changes.
We'll try it out any ways, even though this will be just a little bit misleading.
So if I type inside of your yep, I see the same thing.
OK, so that clarifies when this erro function gets executed.
So remember, it's all about that second argument.
It is rather rare for us to not provide any second array or argument or that array at all.
Much more frequently.
You're going to see either an empty array or when we want to run code during the initial render, or
we are going to see an array with something inside of it like.
So that is way more common than seeing nothing inside there at all.
Now, last thing I want to mention very quickly, this array can have multiple elements inside of it
that we had some other piece of state inside of here, let's say like term two or something.
We can't have term to side there and now use effect is going to run.
If either of those elements change between renders, so only one has to change and the aero function
will be executed.
Again.
All right.
So we now have a pretty good idea.
I'm going to take out that term to piece of state.
I think we've now got a pretty good idea.
About what use effect is really doing and how we can customize it.
Now we're going to make use of use effect to take that term after it changes and make a request out
to the Wikipedia API.
Well, we'll take you to that request in just a moment.