1 00:00:01,010 --> 00:00:05,150 In this video we're going to figure out how to call these search API function just one time when our 2 00:00:05,150 --> 00:00:07,160 component is first rendered to the screen. 3 00:00:07,460 --> 00:00:11,810 After we run that search the first time or then going to just sit around somehow and wait until the 4 00:00:11,810 --> 00:00:13,880 user enters their own search term. 5 00:00:14,020 --> 00:00:17,710 So to do so I'm gonna go back up to the very top of my file up. 6 00:00:17,720 --> 00:00:22,160 You're on the very first line remember we imported that you state hook from react. 7 00:00:22,190 --> 00:00:27,470 Recall that a hook is a function that adds in some new type of functionality to a function component 8 00:00:27,830 --> 00:00:29,930 just like the one we're using right here. 9 00:00:29,930 --> 00:00:33,590 There are several other hooks that are available to us besides you state. 10 00:00:33,590 --> 00:00:37,330 So we're going to use another hook to solve this issue that we're currently in. 11 00:00:37,400 --> 00:00:43,670 I'm going to update my import statement to add a import for something called use effect use effect is 12 00:00:43,670 --> 00:00:49,700 a hook or essentially a function that allows us to run some snippet of code just one time when our component 13 00:00:49,730 --> 00:00:51,960 is first rendered to the screen. 14 00:00:51,980 --> 00:00:56,300 Let's take a look at a diagram and understand exactly how this thing works okay. 15 00:00:56,320 --> 00:01:00,080 So use effect has a couple of different arguments we can pass into it. 16 00:01:00,130 --> 00:01:04,630 The first argument is always going to be a function that functions can have some amount of code that 17 00:01:04,630 --> 00:01:08,360 we want to run only when our component is rendered for the first time. 18 00:01:08,470 --> 00:01:10,700 But there's kind of a caveat there. 19 00:01:10,780 --> 00:01:13,750 It turns out that you state actually takes two separate arguments. 20 00:01:13,750 --> 00:01:18,110 So the first argument is going to be a function that we want to run some number of times. 21 00:01:18,130 --> 00:01:23,320 The second argument is going to configure how often we run that arrow function. 22 00:01:23,320 --> 00:01:28,270 So if we call you state and we pass in an arrow function and nothing else that's going to make the arrow 23 00:01:28,270 --> 00:01:34,000 function in all the code inside of it run every single time our component is rendered to the screen. 24 00:01:34,000 --> 00:01:36,420 So that is definitely not the case that we want right now. 25 00:01:36,460 --> 00:01:40,600 We do not want to run our arrow function every time the component is rendered. 26 00:01:40,600 --> 00:01:43,720 Instead we only want to run the component or see me run this function. 27 00:01:43,720 --> 00:01:50,170 One time when the component is first showed on the screen so to do so we can pass in a second argument 28 00:01:50,470 --> 00:01:53,270 to you state of an empty array. 29 00:01:53,440 --> 00:01:57,670 If we pass in an empty array that's going to tell react that we only want to run that arrow function 30 00:01:57,820 --> 00:02:01,560 once just when the component is first rendered. 31 00:02:01,630 --> 00:02:04,190 There's technically other one other case we can make use of. 32 00:02:04,300 --> 00:02:09,640 Just so you know we can also pass in an array that has some value or multiple values inside of it. 33 00:02:09,730 --> 00:02:14,920 If we do so then react is going to only call that arrow function when the component is first rendered 34 00:02:15,430 --> 00:02:21,100 and then any point time the future whenever a value inside that array is changed. 35 00:02:21,100 --> 00:02:25,630 That might sound like a really weird case but we'll actually run into an application later on where 36 00:02:25,630 --> 00:02:29,730 we will want to make use of this feature but we'll talk about that later. 37 00:02:29,740 --> 00:02:34,990 So essentially if we ever want to run some code inside Iraq component just one time then we can't call 38 00:02:34,990 --> 00:02:35,950 you state. 39 00:02:35,950 --> 00:02:40,300 We'll put our code inside of an arrow function as the first argument and we'll pass in an empty array 40 00:02:40,360 --> 00:02:41,650 as the second. 41 00:02:41,650 --> 00:02:45,240 So let's try that out back inside of our file okay. 42 00:02:45,250 --> 00:02:49,420 So back over here I'm going to first delete that console log I had inside of actually it let's leave 43 00:02:49,420 --> 00:02:54,150 it right in for here for right now just to make sure that we only called search API one time. 44 00:02:54,490 --> 00:02:59,820 I'll then go underneath our search API function and I'll add in a call to use effect. 45 00:03:00,090 --> 00:03:06,580 I'll then put in a zero function as the first argument and an empty array as the second it's now inside 46 00:03:06,580 --> 00:03:07,040 of here. 47 00:03:07,060 --> 00:03:11,150 We should be able to add some code that's only going to be around exactly one time. 48 00:03:11,470 --> 00:03:16,780 It's going to add inside of your call to search API and I'll put in a default search term once again 49 00:03:16,930 --> 00:03:19,850 of pasta. 50 00:03:19,970 --> 00:03:25,570 It's now if we save this we should see eventually 50 results appear and if we flip back over to our 51 00:03:25,570 --> 00:03:29,980 terminal we should no longer see the scrolling output of Hi there. 52 00:03:29,980 --> 00:03:34,930 Instead we should only see at one time now in my case I see it twice just because I'm running to test 53 00:03:34,930 --> 00:03:37,370 devices an iPhone and an android. 54 00:03:37,530 --> 00:03:40,450 But without doubt I only see essentially one Hi there. 55 00:03:40,450 --> 00:03:46,650 Which means I've only called that API exactly one time which is exactly what we want okay. 56 00:03:46,680 --> 00:03:51,990 So once again we're going to use this using fact hook anytime we want to run some code just one time 57 00:03:52,320 --> 00:03:56,300 or possibly multiple times depending upon that second argument. 58 00:03:56,340 --> 00:03:58,020 So this looks pretty good. 59 00:03:58,020 --> 00:04:03,960 We've now got some default search coming up anytime a user starts our application so let's take a pause. 60 00:04:03,960 --> 00:04:08,190 Once again we come back the next video we're gonna make one last change inside of here and we're going 61 00:04:08,190 --> 00:04:12,100 to start to work on rendering our our list of results. 62 00:04:12,240 --> 00:04:13,840 So I'll see you in just a minute.