1 00:00:00,834 --> 00:00:05,040 ‫To finish this section, let's now revisit the topic 2 00:00:05,040 --> 00:00:09,180 ‫of stale closures so that we can dive a little bit deeper 3 00:00:09,180 --> 00:00:11,103 ‫into this important topic. 4 00:00:12,570 --> 00:00:15,660 ‫So when we first learned about use effect 5 00:00:15,660 --> 00:00:18,930 ‫maybe you have wondered why use effect actually 6 00:00:18,930 --> 00:00:21,030 ‫needs the dependency array 7 00:00:21,030 --> 00:00:24,750 ‫in order to know when it should execute the effect. 8 00:00:24,750 --> 00:00:29,520 ‫So why can't the effect not simply rerun automatically 9 00:00:29,520 --> 00:00:30,993 ‫whenever it should? 10 00:00:31,830 --> 00:00:36,830 ‫So to analyze this issue, we need to talk about closures. 11 00:00:36,900 --> 00:00:41,190 ‫So in JavaScript, a closure is basically the fact 12 00:00:41,190 --> 00:00:44,280 ‫that a function captures all the variables 13 00:00:44,280 --> 00:00:46,770 ‫from its Lexile scope. 14 00:00:46,770 --> 00:00:49,470 ‫So from the place that it was defined 15 00:00:49,470 --> 00:00:53,220 ‫at the time that the function was created. 16 00:00:53,220 --> 00:00:57,750 ‫So again, whenever a function is created, it closes 17 00:00:57,750 --> 00:01:02,670 ‫over the effect of that Lexile environment at the time. 18 00:01:02,670 --> 00:01:05,880 ‫And so it'll always have access to the variables 19 00:01:05,880 --> 00:01:08,790 ‫from the place where it was defined. 20 00:01:08,790 --> 00:01:12,630 ‫Now, in React hooks actually rely heavily 21 00:01:12,630 --> 00:01:15,780 ‫on this concept of JavaScript closures 22 00:01:15,780 --> 00:01:19,500 ‫and that is specially true for use effect. 23 00:01:19,500 --> 00:01:22,530 ‫So that's where we mostly see this happening. 24 00:01:22,530 --> 00:01:25,410 ‫And since this is such a great confusion 25 00:01:25,410 --> 00:01:30,180 ‫for many React developers, I wanted to take some time here 26 00:01:30,180 --> 00:01:33,870 ‫to now talk about closures and stale closures 27 00:01:33,870 --> 00:01:37,080 ‫in the use effect hook so that you understand even 28 00:01:37,080 --> 00:01:39,870 ‫better how all of this works. 29 00:01:39,870 --> 00:01:43,890 ‫So this is the type of advanced lecture that you probably 30 00:01:43,890 --> 00:01:48,428 ‫are not gonna find in most other React courses. 31 00:01:48,428 --> 00:01:53,133 ‫So let's just write a very simple effect here. 32 00:01:54,660 --> 00:01:59,660 ‫So just one more effect, and actually what we're doing now 33 00:01:59,910 --> 00:02:01,560 ‫is nothing new really. 34 00:02:01,560 --> 00:02:05,130 ‫All I'm gonna do is to summarize basically what 35 00:02:05,130 --> 00:02:09,180 ‫we have been seeing throughout this course until this point. 36 00:02:09,180 --> 00:02:12,660 ‫But anyway, in this function, all that I want to do 37 00:02:12,660 --> 00:02:17,400 ‫is to change the document title to a string 38 00:02:17,400 --> 00:02:21,150 ‫which contains the number of exercises. 39 00:02:21,150 --> 00:02:26,150 ‫So this title should be your, and then here the number 40 00:02:27,370 --> 00:02:30,483 ‫of workouts or of exercises in the workout. 41 00:02:31,440 --> 00:02:33,460 ‫So your, for example, five 42 00:02:35,400 --> 00:02:38,073 ‫exercise workout. 43 00:02:39,090 --> 00:02:42,540 ‫So let's give this a safe, and then indeed we 44 00:02:42,540 --> 00:02:46,530 ‫get your nine exercise workout, which is exactly 45 00:02:46,530 --> 00:02:48,240 ‫what we have here. 46 00:02:48,240 --> 00:02:52,380 ‫So as I mentioned at the beginning of this lecture 47 00:02:52,380 --> 00:02:55,230 ‫this function right here, so by the time 48 00:02:55,230 --> 00:02:58,560 ‫that this function was first created, it closed over the 49 00:02:58,560 --> 00:03:01,200 ‫variable environment that was present 50 00:03:01,200 --> 00:03:03,900 ‫at the time that dysfunction was created. 51 00:03:03,900 --> 00:03:06,570 ‫So that was in the initial render. 52 00:03:06,570 --> 00:03:09,150 ‫So a closure has been created here 53 00:03:09,150 --> 00:03:12,450 ‫at the time that this first render was created 54 00:03:12,450 --> 00:03:14,580 ‫and it closed over the props 55 00:03:14,580 --> 00:03:17,820 ‫and the state in the case of React. 56 00:03:17,820 --> 00:03:22,770 ‫And in React, we can actually also call this current state 57 00:03:22,770 --> 00:03:25,740 ‫and the current props a snapshot. 58 00:03:25,740 --> 00:03:29,940 ‫And so any function that was created at the initial render 59 00:03:29,940 --> 00:03:33,720 ‫and then not recreated, still has access 60 00:03:33,720 --> 00:03:37,920 ‫to that initial snapshot of state and props. 61 00:03:37,920 --> 00:03:40,920 ‫And so that's exactly what we have right here. 62 00:03:40,920 --> 00:03:43,770 ‫So dysfunction is created at the beginning 63 00:03:43,770 --> 00:03:45,390 ‫but then never again. 64 00:03:45,390 --> 00:03:48,630 ‫And so therefore here we now have a closure 65 00:03:48,630 --> 00:03:52,710 ‫with that initial snapshot and with the dependency array 66 00:03:52,710 --> 00:03:55,890 ‫that we have right now, which is basically here 67 00:03:55,890 --> 00:03:59,160 ‫the empty dependency array as this default, 68 00:03:59,160 --> 00:04:03,330 ‫dysfunction will actually never be recreated again. 69 00:04:03,330 --> 00:04:05,310 ‫And so it will never get access 70 00:04:05,310 --> 00:04:09,527 ‫to the current new snapshot, for example, as we change some 71 00:04:09,527 --> 00:04:13,917 ‫of these state variables, for example, this number here. 72 00:04:13,917 --> 00:04:18,917 ‫So if we change the number of exercises as we would expect 73 00:04:18,990 --> 00:04:23,040 ‫it did not change that up here in the title. 74 00:04:23,040 --> 00:04:25,504 ‫And in fact, we can prove that 75 00:04:25,504 --> 00:04:27,900 ‫\with any other state variable. 76 00:04:27,900 --> 00:04:32,900 ‫So for example, the duration state itself or these sets. 77 00:04:36,660 --> 00:04:41,660 ‫So if we change anything here now, then you see 78 00:04:42,060 --> 00:04:45,120 ‫that this log here happened once at the beginning. 79 00:04:45,120 --> 00:04:47,730 ‫But then as we keep changing these values 80 00:04:47,730 --> 00:04:49,830 ‫this effect will not be executed 81 00:04:49,830 --> 00:04:54,830 ‫and we don't get the fresh values inside dysfunction here. 82 00:04:54,840 --> 00:04:57,240 ‫So all of this is to say 83 00:04:57,240 --> 00:05:02,240 ‫that what was created here is what we call a stale closure. 84 00:05:02,520 --> 00:05:04,860 ‫So it's an outdated closure 85 00:05:04,860 --> 00:05:07,830 ‫because the function has captured the values 86 00:05:07,830 --> 00:05:12,180 ‫from a time where the number was still something else. 87 00:05:12,180 --> 00:05:14,190 ‫So where it was still nine. 88 00:05:14,190 --> 00:05:15,510 ‫Now, in the meantime here 89 00:05:15,510 --> 00:05:19,380 ‫it actually re-rendered because I changed some code. 90 00:05:19,380 --> 00:05:22,200 ‫But again, if I change this to something else 91 00:05:22,200 --> 00:05:25,680 ‫here it is still showing the outdated value. 92 00:05:25,680 --> 00:05:28,440 ‫So the value from the closure. 93 00:05:28,440 --> 00:05:32,280 ‫So essentially the effect function can not see all 94 00:05:32,280 --> 00:05:33,630 ‫of these variables here 95 00:05:33,630 --> 00:05:37,350 ‫unless we specify them in the dependency array. 96 00:05:37,350 --> 00:05:40,470 ‫And so let's now do that. 97 00:05:40,470 --> 00:05:45,090 ‫So let's specify at least the number variable right here. 98 00:05:45,090 --> 00:05:49,440 ‫And so basically specifying a dependency array is a bit 99 00:05:49,440 --> 00:05:53,040 ‫like telling the user facto something like, Hey 100 00:05:53,040 --> 00:05:56,070 ‫I know that you cannot see the current values 101 00:05:56,070 --> 00:05:57,630 ‫in the current render 102 00:05:57,630 --> 00:06:00,840 ‫but I promise that you only need to rerun this 103 00:06:00,840 --> 00:06:04,950 ‫effect whenever number here actually changes 104 00:06:04,950 --> 00:06:08,447 ‫and everything else does not matter to you, right? 105 00:06:10,200 --> 00:06:13,920 ‫And so if we change this now, let's say to nine 106 00:06:13,920 --> 00:06:17,820 ‫then React understands that this number state 107 00:06:17,820 --> 00:06:20,730 ‫here is actually important for this effect. 108 00:06:20,730 --> 00:06:24,570 ‫And so then it'll re-execute it, and by that time 109 00:06:24,570 --> 00:06:27,060 ‫the function can then close over. 110 00:06:27,060 --> 00:06:30,030 ‫So it can then capture the new snapshot. 111 00:06:30,030 --> 00:06:33,870 ‫So basically what the duration, the set and the number are 112 00:06:33,870 --> 00:06:37,143 ‫at the time that this dysfunction is executed again. 113 00:06:38,105 --> 00:06:41,747 ‫So let me now clear this here, and I will now 114 00:06:41,747 --> 00:06:46,747 ‫change the sets to five, enter duration 2, 1 20, let's say. 115 00:06:48,478 --> 00:06:51,630 ‫Then let's change that here. 116 00:06:51,630 --> 00:06:55,260 ‫And then we see that our effect is again, 117 00:06:55,260 --> 00:06:57,690 ‫referencing an old value. 118 00:06:57,690 --> 00:07:01,800 ‫So the duration here is still the duration from before. 119 00:07:01,800 --> 00:07:04,740 ‫And so again, this is here a stale value 120 00:07:04,740 --> 00:07:07,290 ‫now inside the stale closure. 121 00:07:07,290 --> 00:07:09,660 ‫So that's why we really need to define all 122 00:07:09,660 --> 00:07:12,063 ‫of these values in the dependency array. 123 00:07:13,380 --> 00:07:16,950 ‫So again, if we change this year to something 124 00:07:16,950 --> 00:07:20,190 ‫so right now the duration is 42. 125 00:07:20,190 --> 00:07:23,220 ‫And so now when we change the number of exercises 126 00:07:23,220 --> 00:07:27,480 ‫our effect function will capture the duration, the sets 127 00:07:27,480 --> 00:07:30,660 ‫and the number at this exact time. 128 00:07:30,660 --> 00:07:33,270 ‫So remember that is 42. 129 00:07:33,270 --> 00:07:38,270 ‫And so indeed now it again tells us that the duration is 42 130 00:07:39,000 --> 00:07:42,300 ‫even though it has already updated t 30. 131 00:07:42,300 --> 00:07:45,480 ‫And so we would of course then have to 132 00:07:45,480 --> 00:07:47,880 ‫update the duration here as well. 133 00:07:47,880 --> 00:07:49,383 ‫So adding it here, 134 00:07:52,950 --> 00:07:55,500 ‫and since we're here, let's add all of them 135 00:07:55,500 --> 00:07:58,203 ‫and so then it should really work. 136 00:08:00,521 --> 00:08:02,790 ‫So let's say now we are at 21 137 00:08:02,790 --> 00:08:04,713 ‫and if we change this now to 9, 138 00:08:05,640 --> 00:08:09,720 ‫then you see that it does get the newest value. 139 00:08:09,720 --> 00:08:14,490 ‫And so now the stale closure has completely been eliminated. 140 00:08:14,490 --> 00:08:18,090 ‫So at this point, our function here will always get access 141 00:08:18,090 --> 00:08:21,810 ‫to the latest snapshot that it is interested in. 142 00:08:21,810 --> 00:08:25,290 ‫Now, of course, if any of the other state variables out here 143 00:08:25,290 --> 00:08:28,560 ‫change so one that is not in the array, 144 00:08:28,560 --> 00:08:32,040 ‫then this function will still not get access to them. 145 00:08:32,040 --> 00:08:35,010 ‫But it also doesn't need to and it doesn't want to. 146 00:08:35,010 --> 00:08:38,100 ‫And so that's then not a stale closure. 147 00:08:38,100 --> 00:08:41,670 ‫So the stale closure only happens if dysfunction 148 00:08:41,670 --> 00:08:45,990 ‫is still referencing some old values that are outdated 149 00:08:45,990 --> 00:08:48,363 ‫by the time that dysfunction is running. 150 00:08:49,680 --> 00:08:53,490 ‫Okay? And so this is all that I had to show you 151 00:08:53,490 --> 00:08:58,200 ‫in this lecture, so was more talking than anything else 152 00:08:58,200 --> 00:09:01,140 ‫but that was also exactly my goal here. 153 00:09:01,140 --> 00:09:03,690 ‫So if you want, you can play around a bit more with this 154 00:09:03,690 --> 00:09:07,440 ‫maybe in this other effect or creating some more effects. 155 00:09:07,440 --> 00:09:10,620 ‫Cause this is really the most important thing 156 00:09:10,620 --> 00:09:13,470 ‫if you really want to nail this down. 157 00:09:13,470 --> 00:09:16,283 ‫Okay, let's just clean up the code here 158 00:09:16,283 --> 00:09:20,343 ‫before we finish this section completely. 159 00:09:21,600 --> 00:09:23,250 ‫Here we can just keep that. 160 00:09:23,250 --> 00:09:26,673 ‫And then let's also get our timer back. 161 00:09:27,720 --> 00:09:31,470 ‫So now that's updating right here every second again. 162 00:09:31,470 --> 00:09:35,460 ‫Okay, and that does it for this section. 163 00:09:35,460 --> 00:09:38,400 ‫Please make sure to review all the parts that you 164 00:09:38,400 --> 00:09:40,440 ‫found most confusing. 165 00:09:40,440 --> 00:09:43,650 ‫And then once you're done with that, once again 166 00:09:43,650 --> 00:09:47,220 ‫I meet you in yet another new section. 167 00:09:47,220 --> 00:09:49,743 ‫So hopefully I see you there very soon.