1 00:00:01,780 --> 00:00:07,030 The whole key to option number two is making sure that we can run some code specifically when the term 2 00:00:07,030 --> 00:00:08,400 piece of state has changed. 3 00:00:09,070 --> 00:00:11,800 And that's what we want to use the use effect hook for. 4 00:00:12,220 --> 00:00:16,390 Let's take a look at a couple of notes on use effect and understand what it is and how to use it. 5 00:00:17,430 --> 00:00:17,700 All right. 6 00:00:17,720 --> 00:00:18,060 Here we go. 7 00:00:19,060 --> 00:00:23,860 Right now, we are making use of function components, function components do not naturally have access 8 00:00:23,860 --> 00:00:27,020 to lifecycle methods like class components do remember. 9 00:00:27,090 --> 00:00:32,800 Class components have lifecycle methods that get automatically called at certain points in time, even 10 00:00:32,800 --> 00:00:34,270 though we are using function components. 11 00:00:34,300 --> 00:00:38,830 There are still going to be some scenarios where you want to run some code, say when our component 12 00:00:38,860 --> 00:00:44,110 is first rendered to the screen or whenever it is rendered or whenever something else happens. 13 00:00:45,260 --> 00:00:47,090 That is what they use effect hook is for. 14 00:00:47,480 --> 00:00:51,770 It allows functions to use something very similar to Life-cycle methods. 15 00:00:52,280 --> 00:00:58,310 Now, I want you to really pay attention here to something like these are not exactly life-cycle methods, 16 00:00:58,400 --> 00:01:00,920 but you can think of them being very, very similar. 17 00:01:01,920 --> 00:01:06,660 In particular, the reason I say this or I want to put the clarification is, is that I don't want you 18 00:01:06,660 --> 00:01:09,600 to end up writing inside of your function components. 19 00:01:09,600 --> 00:01:12,420 Something like component did mount like so. 20 00:01:12,930 --> 00:01:14,220 Don't do this is a big no. 21 00:01:14,220 --> 00:01:14,460 No. 22 00:01:15,800 --> 00:01:20,000 Opponents in Mount has absolutely no meaning inside of a function component. 23 00:01:20,150 --> 00:01:23,900 And we should never see something called a component in mount inside of a function component. 24 00:01:24,260 --> 00:01:26,240 That's just why I make the really clear distinction. 25 00:01:27,910 --> 00:01:31,600 When we make use of use effect, we provide some configuration to it. 26 00:01:31,810 --> 00:01:36,260 And this configuration is going to configure when we run some code automatically. 27 00:01:37,090 --> 00:01:40,090 There are three ways that we can configure use effect. 28 00:01:40,420 --> 00:01:44,350 And these three different ways are going to change when we execute some code. 29 00:01:45,240 --> 00:01:50,580 The right here are the three different ways that we can configure use effect to run code at a very specific 30 00:01:50,580 --> 00:01:50,940 time. 31 00:01:51,970 --> 00:01:56,920 The first way that we can make use of use effect is to make sure that we run some code when the component 32 00:01:56,950 --> 00:01:59,620 is rendered for the first time only. 33 00:02:00,250 --> 00:02:04,330 That means that whenever our function component is first displayed on the screen, we can make use of 34 00:02:04,330 --> 00:02:05,860 use effect to run some code. 35 00:02:06,010 --> 00:02:09,640 Just that one time, just when the component first goes on the screen and that's it. 36 00:02:09,670 --> 00:02:10,920 We'll never run that code again. 37 00:02:12,020 --> 00:02:17,600 We can also configure use effect to run some code whenever the component is rendered for the first time 38 00:02:18,110 --> 00:02:20,150 and whenever it renders. 39 00:02:20,840 --> 00:02:25,490 And finally, we can configure use effect to run some code when our component is rendered for the first 40 00:02:25,490 --> 00:02:25,910 time. 41 00:02:26,850 --> 00:02:30,930 And whenever it renders and some piece of data has changed. 42 00:02:31,600 --> 00:02:34,110 Now I've got kind of a boolean expression side of here. 43 00:02:34,140 --> 00:02:36,060 You'll notice I say, or the first time. 44 00:02:36,180 --> 00:02:41,190 And whenever it renders and some piece of data has changed to really make this correct. 45 00:02:42,580 --> 00:02:48,100 I should put some parentheses around those last two steps, though, scenario really number three right 46 00:02:48,100 --> 00:02:54,460 here is really saying that we can run some code when our campaign is first rendered and the compounds. 47 00:02:54,520 --> 00:02:59,740 So this whole condition right here, if the component renders and some piece of data has changed, that's 48 00:02:59,740 --> 00:03:01,420 when some code would also be executed. 49 00:03:01,870 --> 00:03:02,920 Now, that's super confusing. 50 00:03:02,980 --> 00:03:06,580 So don't we're going to show you another diagram to clarify number three right here very quickly. 51 00:03:07,870 --> 00:03:12,760 Let's go back over to our other and merely start to write out some code and understand how we make use 52 00:03:13,060 --> 00:03:17,830 of the use effect and how we can configure it to run some code in one of these three scenarios. 53 00:03:19,590 --> 00:03:21,880 So back inside my editor, I'm going to find the. 54 00:03:21,950 --> 00:03:23,810 You state imports and right after it. 55 00:03:24,010 --> 00:03:25,190 I'm going to import U.S. 56 00:03:25,490 --> 00:03:25,970 Effect. 57 00:03:27,060 --> 00:03:29,790 Make use of use effect inside of our component. 58 00:03:30,300 --> 00:03:30,960 We will call. 59 00:03:31,880 --> 00:03:32,530 News effect. 60 00:03:33,070 --> 00:03:38,140 And we will provide a function as the first argument, the first argument is always going to be a function. 61 00:03:38,650 --> 00:03:40,480 It does not have to be an arrow function. 62 00:03:40,600 --> 00:03:43,690 It can be a keyword function if you want it to be is totally up to you. 63 00:03:44,530 --> 00:03:47,560 I personally like Arrow functions just a little bit easier for me to read. 64 00:03:47,710 --> 00:03:49,990 So I use Arrow functions as the first argument. 65 00:03:51,130 --> 00:03:53,260 We can then put in some amount of code inside of your. 66 00:03:54,080 --> 00:03:58,460 They had council log right now, they will be automatically executed at some point time. 67 00:03:59,980 --> 00:04:01,140 Now, here's the key of U.S. 68 00:04:01,320 --> 00:04:06,720 Effect, we have to configure it to tell it when we want our code to be executed. 69 00:04:06,990 --> 00:04:08,520 The one of these three scenarios. 70 00:04:09,440 --> 00:04:15,050 To tell you the effect, which of these scenarios we want to have this erro function right here be executed 71 00:04:15,080 --> 00:04:15,430 in. 72 00:04:15,920 --> 00:04:19,070 We are going to provide a second argument to use effect. 73 00:04:19,820 --> 00:04:25,250 So it's the second argument that we put inside of here that controls we in our code gets executed. 74 00:04:28,020 --> 00:04:33,540 The second argument we're going to put inside there is going to be an empty array, an array with some 75 00:04:33,540 --> 00:04:38,130 value inside of it, such as term or no array at all. 76 00:04:38,910 --> 00:04:40,800 Those are the three options we have. 77 00:04:41,350 --> 00:04:49,080 So every single time you use B, C use effect, you are always going to see a empty array or in array 78 00:04:49,230 --> 00:04:52,410 with one or more elements inside of it or nothing. 79 00:04:53,790 --> 00:04:56,290 You are never going to see, say, an object right here. 80 00:04:56,680 --> 00:04:59,740 You're never going to see a second function defined or something like that. 81 00:04:59,770 --> 00:05:00,970 You are always going to see. 82 00:05:02,590 --> 00:05:05,800 Nothing a ray or ray with something inside of it. 83 00:05:07,680 --> 00:05:10,920 So what do the presence of that array or no Ray or whatever? 84 00:05:10,950 --> 00:05:12,300 What does that really mean for us? 85 00:05:12,900 --> 00:05:16,890 Well, like I said, that second argument controls which these three scenarios we fall into. 86 00:05:17,940 --> 00:05:19,710 Which ball, which scenario we fall into. 87 00:05:19,980 --> 00:05:21,470 We could take a look at this diagram right here. 88 00:05:22,410 --> 00:05:26,910 So if we put in an empty array, that means we want to run that arrow function. 89 00:05:27,000 --> 00:05:30,300 So the first argument at the initial render of our components. 90 00:05:31,310 --> 00:05:37,700 If we provide no array, that means we want to run the aero function at the initial render and after 91 00:05:37,820 --> 00:05:39,350 every single re render. 92 00:05:40,130 --> 00:05:44,960 And finally, if we put in an array with some value inside of it or some variable, that means we want 93 00:05:44,960 --> 00:05:46,490 to run at the initial render. 94 00:05:47,160 --> 00:05:52,000 And we also want to run the aero function after every render. 95 00:05:52,670 --> 00:05:57,440 If some element inside this array has changed since the last render. 96 00:05:58,070 --> 00:06:03,830 So in other words, this data variable right here has to change between renders or the aero function 97 00:06:03,920 --> 00:06:04,850 to be executed. 98 00:06:04,910 --> 00:06:05,300 Again. 99 00:06:07,030 --> 00:06:10,260 But it match these three cases up to these different scenarios right here. 100 00:06:11,950 --> 00:06:14,020 Let's just do a quick copy paste. 101 00:06:14,930 --> 00:06:18,700 So this is really scenario number one over here with the empty array. 102 00:06:18,790 --> 00:06:19,930 That means first time only. 103 00:06:21,030 --> 00:06:26,490 There are a number two is the one in the middle right here, insurgent scenario number three is the 104 00:06:26,490 --> 00:06:27,810 one over here on the right hand side. 105 00:06:27,950 --> 00:06:32,820 I know this diagram is now horribly hard to read, but I want to make sure it was clear which scenario 106 00:06:32,820 --> 00:06:33,900 kind of matched up to which. 107 00:06:35,040 --> 00:06:38,670 All right, so now that we've got a rough idea on what use effect is all about, let's start to play 108 00:06:38,670 --> 00:06:40,410 around with it a little bit in the next video.