1 00:00:00,980 --> 00:00:05,480 Let's write out some more Škoda around our U.S. Factbook and understand when the code inside this function 2 00:00:05,510 --> 00:00:06,290 gets executed. 3 00:00:06,820 --> 00:00:08,240 I'm going to update the console log right now. 4 00:00:08,780 --> 00:00:12,080 I'm going to change it to I only run once. 5 00:00:12,140 --> 00:00:16,640 Like, so you'll notice that the second argument to the U.S. fact function is an empty array. 6 00:00:17,180 --> 00:00:19,730 That means we go back to our little diagram right here. 7 00:00:20,540 --> 00:00:25,130 That means that the arrow function we are providing is only going to be executed one time at the initial 8 00:00:25,130 --> 00:00:25,550 render. 9 00:00:26,050 --> 00:00:28,550 The console log I have inside of here kind of makes a lot of sense. 10 00:00:29,300 --> 00:00:32,210 I can also add in another console log right above. 11 00:00:33,660 --> 00:00:36,870 It says, I run with every render. 12 00:00:37,610 --> 00:00:41,040 So any time that we change our term piece of state, our component re renders. 13 00:00:41,400 --> 00:00:44,580 That will cause this Consolo right here to be executed. 14 00:00:44,640 --> 00:00:46,950 And we should see I run with every render appear. 15 00:00:47,220 --> 00:00:48,870 Every time this component gets re rendered. 16 00:00:49,680 --> 00:00:53,460 Let's try to save this back over and see what happens. 17 00:00:54,320 --> 00:00:56,890 Now, I can see I run with every render. 18 00:00:56,990 --> 00:00:59,340 So that's the console log that we put inside the component self. 19 00:00:59,830 --> 00:01:04,030 And here's the console log from the use effect function, but only ran that one time. 20 00:01:04,750 --> 00:01:09,640 If I start typing into the input, I'm now re rendering the component with every single key press. 21 00:01:10,240 --> 00:01:11,980 I see the I run with every render. 22 00:01:12,220 --> 00:01:14,620 That is evidence that the component is re rendering. 23 00:01:14,990 --> 00:01:18,280 But we do not get any additional console logs from use effect. 24 00:01:19,450 --> 00:01:20,500 Let's try to change that. 25 00:01:20,870 --> 00:01:21,730 I'm gonna go back over. 26 00:01:22,960 --> 00:01:30,070 I'm going to remove that array entirely and I'll update the cons log two, I run after every render. 27 00:01:31,630 --> 00:01:37,180 And just be really precise, we'll say, and at initial render, let's be really precise. 28 00:01:38,630 --> 00:01:42,070 So without the array as the second argument, without any array at all. 29 00:01:42,490 --> 00:01:48,280 We are now running at the initial render and after every re render, let's save that file, do a quick 30 00:01:48,310 --> 00:01:48,790 test. 31 00:01:49,330 --> 00:01:52,690 I can see I run with every render and then every render and initial. 32 00:01:52,780 --> 00:01:54,040 So it just ran on the initial. 33 00:01:55,190 --> 00:02:00,890 Now we can type inside of here and every single key press we see of the components re rendering and 34 00:02:00,920 --> 00:02:02,140 use, the fact is running as well. 35 00:02:03,250 --> 00:02:07,000 Now, the last Nerio is that we have an array with something inside of it. 36 00:02:07,480 --> 00:02:08,740 In this case, we'll put in term. 37 00:02:09,790 --> 00:02:15,850 Now, term being put inside of here is going to give us a little bit misleading effect when we put in 38 00:02:15,850 --> 00:02:17,910 term or anything inside that array. 39 00:02:18,010 --> 00:02:23,530 Remember, that means you want to run at the initial render and after every re render, if that data 40 00:02:23,560 --> 00:02:24,220 has changed. 41 00:02:24,940 --> 00:02:29,560 Well, in this case, the only way that we can rebrand or are component is if term changes. 42 00:02:30,070 --> 00:02:35,530 So this right now with turn right here is going to appear to have the same effect as no array whatsoever 43 00:02:36,010 --> 00:02:40,090 because it's going to run this use effect function any time term changes. 44 00:02:40,660 --> 00:02:43,840 We'll try it out any ways, even though this will be just a little bit misleading. 45 00:02:45,870 --> 00:02:48,200 So if I type inside of your yep, I see the same thing. 46 00:02:49,620 --> 00:02:53,580 OK, so that clarifies when this erro function gets executed. 47 00:02:53,800 --> 00:02:56,160 So remember, it's all about that second argument. 48 00:02:56,720 --> 00:03:01,680 It is rather rare for us to not provide any second array or argument or that array at all. 49 00:03:02,400 --> 00:03:03,420 Much more frequently. 50 00:03:03,450 --> 00:03:09,450 You're going to see either an empty array or when we want to run code during the initial render, or 51 00:03:09,450 --> 00:03:12,390 we are going to see an array with something inside of it like. 52 00:03:12,390 --> 00:03:16,500 So that is way more common than seeing nothing inside there at all. 53 00:03:17,810 --> 00:03:22,130 Now, last thing I want to mention very quickly, this array can have multiple elements inside of it 54 00:03:22,470 --> 00:03:26,380 that we had some other piece of state inside of here, let's say like term two or something. 55 00:03:27,510 --> 00:03:32,370 We can't have term to side there and now use effect is going to run. 56 00:03:32,490 --> 00:03:38,130 If either of those elements change between renders, so only one has to change and the aero function 57 00:03:38,160 --> 00:03:39,090 will be executed. 58 00:03:39,150 --> 00:03:39,450 Again. 59 00:03:40,710 --> 00:03:40,930 All right. 60 00:03:41,130 --> 00:03:43,260 So we now have a pretty good idea. 61 00:03:43,350 --> 00:03:45,150 I'm going to take out that term to piece of state. 62 00:03:45,810 --> 00:03:47,400 I think we've now got a pretty good idea. 63 00:03:48,620 --> 00:03:51,710 About what use effect is really doing and how we can customize it. 64 00:03:52,340 --> 00:03:57,560 Now we're going to make use of use effect to take that term after it changes and make a request out 65 00:03:57,560 --> 00:03:59,210 to the Wikipedia API. 66 00:03:59,910 --> 00:04:02,180 Well, we'll take you to that request in just a moment.