Before we start to worry about showing a list of results we get back from the Yelp API.
There's one less thing I want to take care of.
So at present when our application first starts up here's the series of steps that our application goes
through.
So our search screen function gets called and then right away we don't really have any results to show
on the screen.
Yes we have the search bar that's visible but we don't initially have any set of results to show to
the user.
No restaurants no images nothing like that.
Instead we have to wait for a user to enter a search term submit it and then make our request to the
Yelp API.
Then eventually we get back our results we call some setter and then only at that point in time do we
have some information to show to the user.
So chances are this is not a perfect flow right here.
Instead we would probably want to make sure that as soon as our application starts up we do some initial
kind of default search so we can show a user some default search results right away.
Then if they tap on search and enter in a search term and submit it we can then fetch a new set of results
and show those to the user.
So in other words all I want to do is add in some additional amount of code to make sure that as soon
as our app starts up we can start an initial search to the Yelp API so we get some initial data to show
to the user.
So how are we gonna do that.
Well here's essentially what we want to do whenever our search screen function gets called we probably
want to call that search API function immediately.
So that will allow us to make a request to the API get our results and then update our component status.
So let's try implementing this code right here.
Now I gotta tell you right now if we follow this flow we're gonna end up with a really interesting problem
inside of our component.
So we were about to write some code that is not that great.
I'll be sure to point out what is not so great about it and we're going to immediately turn right back
around and explain exactly what's going wrong with it.
Nonetheless I want to show you the kind of wrong way of handling this because chances are you might
try doing this on your own someday okay.
So back inside my start screen component.
The first thing I want to do is make a little change to my search API function.
Right now our search API function is going to take the search term from the term piece of state.
Now it's kind of an issue for what we are currently trying to do.
Remember when our application first starts up the default value of our term piece of state is an empty
string.
But we want to do a search right away which means we kind of need some like predefined search term.
So in other words I'm going to make my search API function accept an argument called search term and
I'm going to run my API request with that argument as opposed to our term piece of state.
So I to update my prams right here and I'll say term is search term.
So all I did was make sure that my search API is going to accept an argument that is the term we're
going to use to search the API not to make sure that we provide an argument to search API.
I'm going to go back down to my search bar function for seeing my search bar component and I'm going
to update my on term submit function right here.
I'm going to once again wrap this with an arrow function and when we call search API I'm going to pass
in our current term piece of state like so and I'll save that just to get the lines to wrap.
Okay.
So now our search API function is always going to take in that argument.
So now we can much more easily pass in some value to search API when our component is first rendered
on the screen so we can do that initial search okay.
So to do this initial search and make sure that we call search API immediately.
Here's the bad code.
OK.
So right above my j a sex block I'm going to call search API when component is first rendered so right
hearing and a call search API and I get a pass in some default search term.
In my case it'll just be pasta so just be clear this is bad code gonna save this and I'll show you immediately
why this is bad code so I'm gonna save this.
I'm going to flip back over and it's going to appear that everything is working OK.
I see 50 results up here.
However I'm going to go back up to my search API function and right inside of it right on the first
line I'm going to add in a console log of Hi there.
So essentially every single time we initiate a search I should see that console log so I can say this
again I will see 50 results appear and I'm going to flip back over to my terminal so over here I see
now a whole bunch of console logs appearing so clearly I'm running that search to the Yelp API.
Many many times in a row which is definitely not appropriate.
So gonna very quickly flip back with my code editor and comment out that line of code that I just added
I'll then save this so that I stop doing that repetitive search on the old API so what's going wrong
here.
Well remember what is essentially happening inside of our component if we follow this diagram again
yeah we're calling search API immediately we make a request we get our results and then we call our
setter function.
Remember anytime a color center that's going to update our state and cause our component to automatically
render so we essentially go back to square one so the instant we call our center very shortly after
that our search screen function gets called again.
So we run search screen a second time and then here's the key.
We then call search API a second time right away when our component first is shown on the screen.
So we call search API.
Second time we make another request.
We get a results called the setter again and then we update our state.
And that causes the component to render a third time and we essentially are just going through an infinite
loop.
So in other words anytime that we want to do some initial state change inside of our component we're
never going to just call a function directly inside of our component.
Like in this case search screen because we might very easily end up in an infinite loop which is definitely
never what we want to do.
So instead we're going to have to figure out some clever way or some kind of better way I suppose to
make sure that when our component is first rendered to the screen we can make a call to our search API
function but not repetitively make that call over and over and over again.
So let's take a quick pause right here.
When we come back the next video we're gonna figure out how to fix this up to make sure that we only
call search API one time so quick pause and I'll see you in just a minute.