In this video we're going to figure out how to call these search API function just one time when our
component is first rendered to the screen.
After we run that search the first time or then going to just sit around somehow and wait until the
user enters their own search term.
So to do so I'm gonna go back up to the very top of my file up.
You're on the very first line remember we imported that you state hook from react.
Recall that a hook is a function that adds in some new type of functionality to a function component
just like the one we're using right here.
There are several other hooks that are available to us besides you state.
So we're going to use another hook to solve this issue that we're currently in.
I'm going to update my import statement to add a import for something called use effect use effect is
a hook or essentially a function that allows us to run some snippet of code just one time when our component
is first rendered to the screen.
Let's take a look at a diagram and understand exactly how this thing works okay.
So use effect has a couple of different arguments we can pass into it.
The first argument is always going to be a function that functions can have some amount of code that
we want to run only when our component is rendered for the first time.
But there's kind of a caveat there.
It turns out that you state actually takes two separate arguments.
So the first argument is going to be a function that we want to run some number of times.
The second argument is going to configure how often we run that arrow function.
So if we call you state and we pass in an arrow function and nothing else that's going to make the arrow
function in all the code inside of it run every single time our component is rendered to the screen.
So that is definitely not the case that we want right now.
We do not want to run our arrow function every time the component is rendered.
Instead we only want to run the component or see me run this function.
One time when the component is first showed on the screen so to do so we can pass in a second argument
to you state of an empty array.
If we pass in an empty array that's going to tell react that we only want to run that arrow function
once just when the component is first rendered.
There's technically other one other case we can make use of.
Just so you know we can also pass in an array that has some value or multiple values inside of it.
If we do so then react is going to only call that arrow function when the component is first rendered
and then any point time the future whenever a value inside that array is changed.
That might sound like a really weird case but we'll actually run into an application later on where
we will want to make use of this feature but we'll talk about that later.
So essentially if we ever want to run some code inside Iraq component just one time then we can't call
you state.
We'll put our code inside of an arrow function as the first argument and we'll pass in an empty array
as the second.
So let's try that out back inside of our file okay.
So back over here I'm going to first delete that console log I had inside of actually it let's leave
it right in for here for right now just to make sure that we only called search API one time.
I'll then go underneath our search API function and I'll add in a call to use effect.
I'll then put in a zero function as the first argument and an empty array as the second it's now inside
of here.
We should be able to add some code that's only going to be around exactly one time.
It's going to add inside of your call to search API and I'll put in a default search term once again
of pasta.
It's now if we save this we should see eventually 50 results appear and if we flip back over to our
terminal we should no longer see the scrolling output of Hi there.
Instead we should only see at one time now in my case I see it twice just because I'm running to test
devices an iPhone and an android.
But without doubt I only see essentially one Hi there.
Which means I've only called that API exactly one time which is exactly what we want okay.
So once again we're going to use this using fact hook anytime we want to run some code just one time
or possibly multiple times depending upon that second argument.
So this looks pretty good.
We've now got some default search coming up anytime a user starts our application so let's take a pause.
Once again we come back the next video we're gonna make one last change inside of here and we're going
to start to work on rendering our our list of results.
So I'll see you in just a minute.