1 00:00:00,680 --> 00:00:04,130 Before we start to worry about showing a list of results we get back from the Yelp API. 2 00:00:04,160 --> 00:00:05,690 There's one less thing I want to take care of. 3 00:00:06,230 --> 00:00:10,460 So at present when our application first starts up here's the series of steps that our application goes 4 00:00:10,460 --> 00:00:11,210 through. 5 00:00:11,210 --> 00:00:15,980 So our search screen function gets called and then right away we don't really have any results to show 6 00:00:15,980 --> 00:00:16,900 on the screen. 7 00:00:16,910 --> 00:00:22,400 Yes we have the search bar that's visible but we don't initially have any set of results to show to 8 00:00:22,400 --> 00:00:22,850 the user. 9 00:00:22,850 --> 00:00:25,460 No restaurants no images nothing like that. 10 00:00:25,460 --> 00:00:29,990 Instead we have to wait for a user to enter a search term submit it and then make our request to the 11 00:00:29,990 --> 00:00:31,460 Yelp API. 12 00:00:31,460 --> 00:00:36,290 Then eventually we get back our results we call some setter and then only at that point in time do we 13 00:00:36,290 --> 00:00:38,760 have some information to show to the user. 14 00:00:38,870 --> 00:00:41,990 So chances are this is not a perfect flow right here. 15 00:00:41,990 --> 00:00:47,420 Instead we would probably want to make sure that as soon as our application starts up we do some initial 16 00:00:47,420 --> 00:00:52,960 kind of default search so we can show a user some default search results right away. 17 00:00:53,000 --> 00:00:58,340 Then if they tap on search and enter in a search term and submit it we can then fetch a new set of results 18 00:00:58,400 --> 00:01:00,060 and show those to the user. 19 00:01:00,080 --> 00:01:04,370 So in other words all I want to do is add in some additional amount of code to make sure that as soon 20 00:01:04,370 --> 00:01:10,310 as our app starts up we can start an initial search to the Yelp API so we get some initial data to show 21 00:01:10,310 --> 00:01:11,620 to the user. 22 00:01:11,690 --> 00:01:12,860 So how are we gonna do that. 23 00:01:13,310 --> 00:01:18,200 Well here's essentially what we want to do whenever our search screen function gets called we probably 24 00:01:18,200 --> 00:01:21,060 want to call that search API function immediately. 25 00:01:21,060 --> 00:01:26,910 So that will allow us to make a request to the API get our results and then update our component status. 26 00:01:26,990 --> 00:01:29,400 So let's try implementing this code right here. 27 00:01:29,450 --> 00:01:35,120 Now I gotta tell you right now if we follow this flow we're gonna end up with a really interesting problem 28 00:01:35,150 --> 00:01:36,520 inside of our component. 29 00:01:36,590 --> 00:01:40,000 So we were about to write some code that is not that great. 30 00:01:40,100 --> 00:01:44,000 I'll be sure to point out what is not so great about it and we're going to immediately turn right back 31 00:01:44,000 --> 00:01:47,010 around and explain exactly what's going wrong with it. 32 00:01:47,090 --> 00:01:51,470 Nonetheless I want to show you the kind of wrong way of handling this because chances are you might 33 00:01:51,470 --> 00:01:54,630 try doing this on your own someday okay. 34 00:01:54,660 --> 00:01:56,650 So back inside my start screen component. 35 00:01:56,650 --> 00:02:00,670 The first thing I want to do is make a little change to my search API function. 36 00:02:00,670 --> 00:02:05,920 Right now our search API function is going to take the search term from the term piece of state. 37 00:02:05,920 --> 00:02:08,720 Now it's kind of an issue for what we are currently trying to do. 38 00:02:08,740 --> 00:02:13,480 Remember when our application first starts up the default value of our term piece of state is an empty 39 00:02:13,480 --> 00:02:14,390 string. 40 00:02:14,590 --> 00:02:20,420 But we want to do a search right away which means we kind of need some like predefined search term. 41 00:02:20,650 --> 00:02:27,310 So in other words I'm going to make my search API function accept an argument called search term and 42 00:02:27,310 --> 00:02:32,210 I'm going to run my API request with that argument as opposed to our term piece of state. 43 00:02:32,590 --> 00:02:37,210 So I to update my prams right here and I'll say term is search term. 44 00:02:37,210 --> 00:02:41,740 So all I did was make sure that my search API is going to accept an argument that is the term we're 45 00:02:41,740 --> 00:02:47,540 going to use to search the API not to make sure that we provide an argument to search API. 46 00:02:47,540 --> 00:02:52,630 I'm going to go back down to my search bar function for seeing my search bar component and I'm going 47 00:02:52,630 --> 00:02:55,490 to update my on term submit function right here. 48 00:02:55,700 --> 00:03:01,120 I'm going to once again wrap this with an arrow function and when we call search API I'm going to pass 49 00:03:01,120 --> 00:03:06,210 in our current term piece of state like so and I'll save that just to get the lines to wrap. 50 00:03:08,580 --> 00:03:08,840 Okay. 51 00:03:08,850 --> 00:03:12,050 So now our search API function is always going to take in that argument. 52 00:03:12,050 --> 00:03:18,170 So now we can much more easily pass in some value to search API when our component is first rendered 53 00:03:18,230 --> 00:03:22,540 on the screen so we can do that initial search okay. 54 00:03:22,570 --> 00:03:26,960 So to do this initial search and make sure that we call search API immediately. 55 00:03:27,020 --> 00:03:28,650 Here's the bad code. 56 00:03:28,650 --> 00:03:29,180 OK. 57 00:03:29,380 --> 00:03:42,000 So right above my j a sex block I'm going to call search API when component is first rendered so right 58 00:03:42,010 --> 00:03:45,910 hearing and a call search API and I get a pass in some default search term. 59 00:03:45,960 --> 00:03:55,640 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 60 00:03:55,670 --> 00:03:58,670 why this is bad code so I'm gonna save this. 61 00:03:58,670 --> 00:04:02,520 I'm going to flip back over and it's going to appear that everything is working OK. 62 00:04:02,570 --> 00:04:05,230 I see 50 results up here. 63 00:04:05,230 --> 00:04:10,280 However I'm going to go back up to my search API function and right inside of it right on the first 64 00:04:10,280 --> 00:04:13,380 line I'm going to add in a console log of Hi there. 65 00:04:13,400 --> 00:04:18,110 So essentially every single time we initiate a search I should see that console log so I can say this 66 00:04:18,110 --> 00:04:24,930 again I will see 50 results appear and I'm going to flip back over to my terminal so over here I see 67 00:04:24,930 --> 00:04:30,090 now a whole bunch of console logs appearing so clearly I'm running that search to the Yelp API. 68 00:04:30,090 --> 00:04:34,240 Many many times in a row which is definitely not appropriate. 69 00:04:34,240 --> 00:04:39,060 So gonna very quickly flip back with my code editor and comment out that line of code that I just added 70 00:04:39,410 --> 00:04:44,700 I'll then save this so that I stop doing that repetitive search on the old API so what's going wrong 71 00:04:44,700 --> 00:04:45,530 here. 72 00:04:45,690 --> 00:04:49,830 Well remember what is essentially happening inside of our component if we follow this diagram again 73 00:04:50,220 --> 00:04:54,480 yeah we're calling search API immediately we make a request we get our results and then we call our 74 00:04:54,480 --> 00:04:55,800 setter function. 75 00:04:55,920 --> 00:05:00,630 Remember anytime a color center that's going to update our state and cause our component to automatically 76 00:05:00,650 --> 00:05:08,000 render so we essentially go back to square one so the instant we call our center very shortly after 77 00:05:08,000 --> 00:05:11,180 that our search screen function gets called again. 78 00:05:11,270 --> 00:05:14,270 So we run search screen a second time and then here's the key. 79 00:05:14,270 --> 00:05:21,870 We then call search API a second time right away when our component first is shown on the screen. 80 00:05:22,040 --> 00:05:23,060 So we call search API. 81 00:05:23,060 --> 00:05:25,320 Second time we make another request. 82 00:05:25,490 --> 00:05:28,570 We get a results called the setter again and then we update our state. 83 00:05:28,580 --> 00:05:33,350 And that causes the component to render a third time and we essentially are just going through an infinite 84 00:05:33,350 --> 00:05:34,480 loop. 85 00:05:34,580 --> 00:05:42,010 So in other words anytime that we want to do some initial state change inside of our component we're 86 00:05:42,010 --> 00:05:46,510 never going to just call a function directly inside of our component. 87 00:05:46,510 --> 00:05:51,700 Like in this case search screen because we might very easily end up in an infinite loop which is definitely 88 00:05:51,700 --> 00:05:53,700 never what we want to do. 89 00:05:53,710 --> 00:05:59,080 So instead we're going to have to figure out some clever way or some kind of better way I suppose to 90 00:05:59,080 --> 00:06:03,370 make sure that when our component is first rendered to the screen we can make a call to our search API 91 00:06:03,370 --> 00:06:08,050 function but not repetitively make that call over and over and over again. 92 00:06:08,080 --> 00:06:09,600 So let's take a quick pause right here. 93 00:06:09,610 --> 00:06:13,150 When we come back the next video we're gonna figure out how to fix this up to make sure that we only 94 00:06:13,150 --> 00:06:17,640 call search API one time so quick pause and I'll see you in just a minute.