1 00:00:00,180 --> 00:00:01,140 Not bad, not bad. 2 00:00:01,170 --> 00:00:08,610 We're done with use of basics, and now let's take a look at the clean up function and why would want 3 00:00:08,610 --> 00:00:09,290 to use it. 4 00:00:09,720 --> 00:00:15,810 And first, I would want to change the files all this time we were working and use the fact basics. 5 00:00:16,290 --> 00:00:22,530 And of course, I would want to navigate to Abcess and I'm still looking for a set of folder, but now 6 00:00:22,530 --> 00:00:26,250 I'm looking for the file number to use affect cleanup. 7 00:00:26,550 --> 00:00:29,820 Again, it's still going to be a setup since I didn't change the name. 8 00:00:30,090 --> 00:00:34,040 And what you see on the screen is use the fact cleanup. 9 00:00:34,410 --> 00:00:37,560 Now, of course, let's navigate to that particular file. 10 00:00:37,590 --> 00:00:39,030 So again, not the final one. 11 00:00:39,180 --> 00:00:40,050 We set up one. 12 00:00:40,440 --> 00:00:46,640 And in here, what I would want is to check for the width of the window. 13 00:00:47,070 --> 00:00:48,450 So we're still using use fact. 14 00:00:48,850 --> 00:00:49,440 That is good. 15 00:00:49,800 --> 00:00:56,850 But I would want to check the size of the window and we can do that by setting up the Lessner on the 16 00:00:56,880 --> 00:00:58,140 window object. 17 00:00:58,380 --> 00:01:04,350 Now, first, let's set up some use state volume so you can notice we have reimported you state and 18 00:01:04,350 --> 00:01:04,980 use fact. 19 00:01:05,310 --> 00:01:14,280 And what I'm looking for here is const now all named this size and Satie's so set size and then we'll 20 00:01:14,280 --> 00:01:15,720 use the used state. 21 00:01:16,590 --> 00:01:23,160 And that is our hook, and then in order to get the width of the window, we're going to go with window 22 00:01:23,160 --> 00:01:26,390 and land the property is in there with. 23 00:01:26,730 --> 00:01:33,030 Now, if you would want a council log, you can just go with council log and check the size and you 24 00:01:33,030 --> 00:01:35,280 should see some value over here. 25 00:01:35,700 --> 00:01:37,530 So let me open up the council. 26 00:01:37,860 --> 00:01:41,970 And of course, it tells me here that is four hundred and eighty four. 27 00:01:42,150 --> 00:01:43,970 Now, of course, it's not going to change at the moment. 28 00:01:43,980 --> 00:01:49,110 We haven't set up the functionality, but that is going to be the whole area where we set up the event 29 00:01:49,110 --> 00:01:50,460 listener on the window. 30 00:01:50,460 --> 00:01:54,420 And as the size of the window changes, so does the value. 31 00:01:54,750 --> 00:02:01,110 Now, first, let me open up a bigger browser window because it's going to be easier to operate. 32 00:02:01,440 --> 00:02:03,940 So I'm going to go here with localhost three thousand. 33 00:02:03,950 --> 00:02:06,200 And of course, I still have the same setup. 34 00:02:06,480 --> 00:02:09,150 Now, in this case, though, of course, the value should be different. 35 00:02:09,390 --> 00:02:09,810 Correct. 36 00:02:10,110 --> 00:02:12,050 Because, of course, the window is bigger. 37 00:02:12,060 --> 00:02:16,100 So as you can see, it is twelve hundred and thirty one. 38 00:02:16,470 --> 00:02:21,690 So now what I would want to do is to set up a some kind of return. 39 00:02:22,560 --> 00:02:32,400 So I guess and then we'll go with a fragment first and then let's type in one side window and then let's 40 00:02:32,400 --> 00:02:32,760 write. 41 00:02:32,760 --> 00:02:36,550 Having two and having Q will be looking for that size. 42 00:02:37,080 --> 00:02:44,190 So first let's access the state value and then let's the pixels so we should see here our window and 43 00:02:44,190 --> 00:02:46,040 then whatever is the value. 44 00:02:46,110 --> 00:02:49,650 And of course it should match exactly what we have in the console. 45 00:02:50,160 --> 00:02:54,690 And now let's set up a vent listener on the window. 46 00:02:55,020 --> 00:02:58,790 And for that case we will use the user effect. 47 00:02:59,310 --> 00:03:01,710 So we're going to go over here, will say user fact. 48 00:03:02,130 --> 00:03:08,340 And then in the user effect, what I would want, of course, is to pass in my callback action. 49 00:03:08,440 --> 00:03:09,420 Now, that is true. 50 00:03:09,660 --> 00:03:15,760 And then within that callback function, I will want the listener on the window. 51 00:03:16,080 --> 00:03:20,730 So first I'll be listening for resize event, that's number one. 52 00:03:21,030 --> 00:03:22,890 And then we need that callback function. 53 00:03:22,980 --> 00:03:29,900 So essentially a function that will run each and every time the event will take place. 54 00:03:29,910 --> 00:03:30,930 So the recession one. 55 00:03:31,230 --> 00:03:34,410 And in this case, I think I'll call this check size. 56 00:03:35,390 --> 00:03:36,830 So let's try to exercise now. 57 00:03:36,860 --> 00:03:43,310 The thing is, of course, we need to create that particular function, so let's create it was a check 58 00:03:43,340 --> 00:03:50,180 size and as far as the function, it will all the time update the size. 59 00:03:50,540 --> 00:03:51,350 So, all right. 60 00:03:51,350 --> 00:03:55,940 Here said size and then whatever is the value, get the inner with. 61 00:03:56,450 --> 00:04:01,670 So what we're doing here is we have to use the fact we have the callback function and we're setting 62 00:04:01,670 --> 00:04:04,040 up the event listener on a window. 63 00:04:04,280 --> 00:04:12,080 And each and every time this event will take place, the first one we will invoke the check size function. 64 00:04:12,290 --> 00:04:19,760 And as far as check size, why don't we just call that size and then we get the current width of the 65 00:04:19,760 --> 00:04:20,100 window. 66 00:04:20,390 --> 00:04:22,880 So let's see whether this is going to work. 67 00:04:23,180 --> 00:04:26,730 So the moment, of course, of this is fourteen, sixty three. 68 00:04:27,200 --> 00:04:30,950 Now let's see whether we can update and everything works nicely. 69 00:04:30,950 --> 00:04:31,340 Correct. 70 00:04:31,700 --> 00:04:33,430 So we can make it bigger. 71 00:04:33,440 --> 00:04:34,400 We can make it smaller. 72 00:04:34,670 --> 00:04:40,370 And each and every time I'm resizing the window, I'm getting the correct volume because again we have 73 00:04:40,370 --> 00:04:44,450 the event listener, we're getting the colors and everything is beautiful. 74 00:04:44,990 --> 00:04:48,010 Our let me throw you a mine grenade. 75 00:04:48,500 --> 00:04:56,570 What if we go two elements, then we'll check event listeners and then we'll check for resize one. 76 00:04:57,020 --> 00:04:57,890 Now, what do you think? 77 00:04:57,890 --> 00:04:59,060 How many will have their. 78 00:04:59,990 --> 00:05:03,110 We shouldn't have one, correct now, does that look like one? 79 00:05:03,770 --> 00:05:04,900 No, it doesn't. 80 00:05:05,240 --> 00:05:11,620 And the problem with this one is that eventually we'll just have a memory like where the moment your 81 00:05:11,630 --> 00:05:17,570 app gets bigger and bigger and bigger, and if you have a bunch of components that are setting up these 82 00:05:17,570 --> 00:05:19,550 event listeners left and right. 83 00:05:20,440 --> 00:05:30,550 It will cause huge problems, so there has to be a way where once we, of course, exit, then we remove 84 00:05:30,550 --> 00:05:30,760 that. 85 00:05:31,660 --> 00:05:34,720 Now, first we need to understand why is that happening here? 86 00:05:35,260 --> 00:05:36,940 Well, we have to use the fact. 87 00:05:37,180 --> 00:05:37,690 Correct. 88 00:05:37,930 --> 00:05:42,040 We have the window listener now in the callback function. 89 00:05:42,070 --> 00:05:43,520 What are we doing over here? 90 00:05:44,080 --> 00:05:47,050 What do you think we have said is correct now? 91 00:05:47,050 --> 00:05:48,370 What is the set size doing? 92 00:05:48,940 --> 00:05:51,750 It is triggering the referendum. 93 00:05:51,760 --> 00:05:52,180 Correct. 94 00:05:52,540 --> 00:05:57,040 Because the moment we invoke that size, we update the value. 95 00:05:57,940 --> 00:06:03,850 As far as the state value, as far as the size and what was your state doing, it was preserving the 96 00:06:03,850 --> 00:06:07,990 values and it was triggering the rewriter. 97 00:06:08,650 --> 00:06:14,620 So each and every time we call this callback function, meaning each and every time we resize the window, 98 00:06:14,980 --> 00:06:17,530 we also trigger the render. 99 00:06:18,160 --> 00:06:22,570 So the more we trigger render under then again, we call the use effect fact. 100 00:06:22,780 --> 00:06:27,430 Now, if you want, you can just simply console log and you'll see that in a console where I'll say 101 00:06:27,430 --> 00:06:28,300 hello world. 102 00:06:28,780 --> 00:06:32,890 And the moment we refresh notice, technically we have one. 103 00:06:32,890 --> 00:06:33,360 Correct. 104 00:06:33,670 --> 00:06:35,470 So now we have one event listener. 105 00:06:35,950 --> 00:06:42,100 But of course, the moment I'll start adding some changes, you'll notice, first of all, in the console, 106 00:06:42,100 --> 00:06:43,330 I have a bunch of other worlds. 107 00:06:43,720 --> 00:06:46,450 So each and every time I'm calling the use of fact. 108 00:06:46,610 --> 00:06:55,520 And of course if I check my events and if I refresh, I'll have a bunch of event listeners as well. 109 00:06:55,840 --> 00:07:00,080 And this is where the clean up function come into play. 110 00:07:00,520 --> 00:07:08,420 So every time we have this usufruct, we also have an option of returning a function. 111 00:07:08,710 --> 00:07:10,510 So we go here with a return. 112 00:07:11,740 --> 00:07:20,260 And as far as the function, what are we place over here will be invoked once we exit and I think the 113 00:07:20,260 --> 00:07:23,700 best way to showcase that is adding another council log. 114 00:07:24,190 --> 00:07:28,930 I'll say clean up here and let's set up a remove eventless there. 115 00:07:29,200 --> 00:07:33,710 So we'll go with window and remove a listener again. 116 00:07:33,760 --> 00:07:40,690 We need to set up a resource and the same callback function so we would want to remove. 117 00:07:41,590 --> 00:07:48,730 Once, essentially, we are done and what you'll notice right now is something really interesting where 118 00:07:48,730 --> 00:07:52,720 we call the hello world, because that is a natural wonder. 119 00:07:53,140 --> 00:08:01,030 But what you'll notice before we do anything, so before we set up another event listener, because 120 00:08:01,030 --> 00:08:08,580 notice this is happening as I keep changing the screen size, then we also call the cleanup function. 121 00:08:08,980 --> 00:08:17,170 So I think the best case scenario is going to be adding here comes along and I'll say render that in 122 00:08:17,170 --> 00:08:17,740 here. 123 00:08:18,370 --> 00:08:25,300 We'll call this, use the fact, use a fact and then we'll have our cleanup and you'll notice how it 124 00:08:25,300 --> 00:08:25,620 works. 125 00:08:25,960 --> 00:08:28,480 So naturally, we have the render correct. 126 00:08:28,810 --> 00:08:31,620 Then we call the use effect. 127 00:08:31,990 --> 00:08:39,060 Now, before we call the use of fact, one more time will also clean up. 128 00:08:39,520 --> 00:08:41,330 So we have our initial render. 129 00:08:41,380 --> 00:08:42,780 Again, don't pay attention. 130 00:08:42,780 --> 00:08:43,690 Then there's two of them. 131 00:08:43,990 --> 00:08:45,360 There is in the shower render. 132 00:08:45,730 --> 00:08:48,640 Then we invoke the use of fact. 133 00:08:48,970 --> 00:08:56,260 And then again, once we trigger re render, once we render the component one more time before we call 134 00:08:56,260 --> 00:08:57,000 that use effect. 135 00:08:57,460 --> 00:09:03,160 So before we add that another event listener, essentially we clean it up. 136 00:09:04,030 --> 00:09:08,770 We removed that listener and of course, we can also see that by the console. 137 00:09:09,430 --> 00:09:13,450 So that is going to be how the cleanup function works. 138 00:09:13,870 --> 00:09:18,250 So, yes, the user effect will run after each and every render. 139 00:09:18,280 --> 00:09:22,180 That is, of course, the default that in this case, we're sending out the event listener. 140 00:09:22,360 --> 00:09:27,400 We're checking for a response now that will trigger the render. 141 00:09:27,520 --> 00:09:36,290 However, before we around the user, after that render, we will run the cleanup function first. 142 00:09:36,700 --> 00:09:38,620 So that's how the setup works. 143 00:09:39,010 --> 00:09:46,040 And you might make a good argument where technically in this example, we don't need to clean up function. 144 00:09:46,460 --> 00:09:47,830 Now, what am I talking about here? 145 00:09:48,270 --> 00:09:51,630 I remember we had that initial render. 146 00:09:51,640 --> 00:09:53,170 We had that dependency list. 147 00:09:53,500 --> 00:09:56,860 So, for example, in here, I could say, you know what? 148 00:09:57,040 --> 00:10:02,710 I would just want around the user only once we rendered components. 149 00:10:03,100 --> 00:10:05,620 And in this case, you're actually correct. 150 00:10:06,600 --> 00:10:14,580 Because what you'll notice that even if we comment about the return, meaning the cleanup function, 151 00:10:14,910 --> 00:10:18,120 we'll still have only one event listener. 152 00:10:18,480 --> 00:10:20,940 So notice how I'm rendering the component. 153 00:10:20,940 --> 00:10:21,750 That is true. 154 00:10:22,060 --> 00:10:29,660 But if I check out the elements, I can clearly see that I still have only one event listener because 155 00:10:29,670 --> 00:10:32,010 of my use of fact, only morons ones. 156 00:10:32,460 --> 00:10:37,440 Now, before you dismiss the cleanup function where you can say, well, each and every time, I'll 157 00:10:37,440 --> 00:10:40,560 just add this empty dependency, right. 158 00:10:40,980 --> 00:10:49,830 You need to understand that the cleanup function is very important when we start dealing with component 159 00:10:50,130 --> 00:10:56,910 appearing and disappearing, meaning there's going to be conditional rendering where you at the moment 160 00:10:56,940 --> 00:10:58,880 this component is all the time on the screen. 161 00:10:59,310 --> 00:11:04,440 So to tell you honestly, this makes sense where we just set up a dependency array and we say, you 162 00:11:04,440 --> 00:11:09,960 know, once the component renders, we will set up the listener and life is great. 163 00:11:10,350 --> 00:11:15,060 How are we need to understand that there's going to be components that, for example, are displayed 164 00:11:15,060 --> 00:11:17,010 and then they are removed? 165 00:11:17,670 --> 00:11:24,600 And the problem with this one is that even though it runs on the initial render, each and every time 166 00:11:24,880 --> 00:11:29,220 we will show and hide that component, it will. 167 00:11:29,220 --> 00:11:35,370 And again, the window listener or event listener or whatever side effect you added there. 168 00:11:35,820 --> 00:11:40,680 And that is something that I'll show you a little bit later once we talk about the conditional rendering. 169 00:11:40,950 --> 00:11:48,690 Just don't dismiss it, even though in this case, yeah, we could have fixed our issue with this empty 170 00:11:48,690 --> 00:11:50,660 dependency array, essentially. 171 00:11:50,700 --> 00:11:54,000 Don't forget that it is a good practice. 172 00:11:54,390 --> 00:12:02,280 Each and every time you set up a side effect is to also set up a clean up function so you don't make 173 00:12:02,280 --> 00:12:10,140 a big, fat mess by just adding tons of subscriptions, tons of event listeners or that kind of thing.