1 00:00:01,050 --> 00:00:02,970 ‫So with our knowledge 2 00:00:02,970 --> 00:00:06,180 ‫about the cleanup function, we can now very easily 3 00:00:06,180 --> 00:00:10,263 ‫solve the problem that we still have with our page title. 4 00:00:12,090 --> 00:00:15,150 ‫So remember that we need a cleanup function. 5 00:00:15,150 --> 00:00:18,090 ‫Whenever the side effect that we introduced 6 00:00:18,090 --> 00:00:21,600 ‫in the effect keeps happening after the component 7 00:00:21,600 --> 00:00:23,910 ‫has already been unmounted. 8 00:00:23,910 --> 00:00:27,360 ‫And so that is actually exactly our case here. 9 00:00:27,360 --> 00:00:31,470 ‫So indeed, we no longer have the inception movie here 10 00:00:31,470 --> 00:00:34,410 ‫but the side effect is still happening. 11 00:00:34,410 --> 00:00:37,680 ‫So the title is still showing that old movie 12 00:00:37,680 --> 00:00:40,023 ‫that we had selected before. 13 00:00:40,860 --> 00:00:43,470 ‫And so the cleanup function is of course 14 00:00:43,470 --> 00:00:46,770 ‫the perfect solution for this case. 15 00:00:46,770 --> 00:00:48,480 ‫So a cleanup function, 16 00:00:48,480 --> 00:00:52,473 ‫remember is simply a function that we return from an effect. 17 00:00:53,610 --> 00:00:56,760 ‫And so let's specify a function here 18 00:00:56,760 --> 00:01:00,783 ‫and then return it from the effect function. 19 00:01:01,841 --> 00:01:06,270 ‫And here all we want to do is to basically reset 20 00:01:06,270 --> 00:01:10,410 ‫the document.title to its original form. 21 00:01:10,410 --> 00:01:15,410 ‫So that's usePopcorn, and this is all we have to do. 22 00:01:17,850 --> 00:01:19,290 ‫So let's reload. 23 00:01:19,290 --> 00:01:21,540 ‫Let's select our movie, 24 00:01:21,540 --> 00:01:24,540 ‫then indeed we get a title but as we go back, 25 00:01:24,540 --> 00:01:28,383 ‫or title also goes back to usePopcorn. 26 00:01:29,280 --> 00:01:32,460 ‫Great, and so this is actually all the code 27 00:01:32,460 --> 00:01:35,460 ‫that we have to write to solve this problem. 28 00:01:35,460 --> 00:01:37,950 ‫But let's just do a quick experiment 29 00:01:37,950 --> 00:01:40,710 ‫just so I can show you something. 30 00:01:40,710 --> 00:01:42,810 ‫So let's look to the console here. 31 00:01:42,810 --> 00:01:45,120 ‫Also in this situation, 32 00:01:45,120 --> 00:01:50,120 ‫clean up effect for movie and then the title. 33 00:01:56,790 --> 00:02:00,090 ‫And here we keep getting these random errors 34 00:02:00,090 --> 00:02:04,110 ‫which is because one of these images here cannot be found. 35 00:02:04,110 --> 00:02:06,843 ‫So that's a bit annoying, but let's just ignore that. 36 00:02:08,049 --> 00:02:10,803 ‫So let's reload, clear the console here, 37 00:02:11,700 --> 00:02:13,230 ‫then select one of the movies 38 00:02:13,230 --> 00:02:17,160 ‫and now as I go back we already know that this function here 39 00:02:17,160 --> 00:02:18,960 ‫will get executed. 40 00:02:18,960 --> 00:02:21,720 ‫And so again that's because this component here 41 00:02:21,720 --> 00:02:25,800 ‫will be unmounted and so that's when the cleanup function 42 00:02:25,800 --> 00:02:28,083 ‫of the effect will get executed. 43 00:02:28,920 --> 00:02:30,690 ‫So our title will change. 44 00:02:30,690 --> 00:02:33,063 ‫And let's see what is locked to the console. 45 00:02:34,860 --> 00:02:39,120 ‫So we get cleanup effect for movie "Inception." 46 00:02:39,120 --> 00:02:42,600 ‫Now, it might seem obvious that we get the name here 47 00:02:42,600 --> 00:02:44,250 ‫but if we think about it, 48 00:02:44,250 --> 00:02:47,790 ‫it actually might seem a bit strange, right? 49 00:02:47,790 --> 00:02:50,820 ‫Because as we learned in the previous lecture 50 00:02:50,820 --> 00:02:54,150 ‫this cleanup function here will actually run 51 00:02:54,150 --> 00:02:57,420 ‫after the component has already unmounted. 52 00:02:57,420 --> 00:03:00,930 ‫And so if that's the case then how will the function 53 00:03:00,930 --> 00:03:03,453 ‫actually remember this title here? 54 00:03:04,320 --> 00:03:08,580 ‫So again, this function here runs only after the component 55 00:03:08,580 --> 00:03:12,240 ‫has already disappeared from our componentry 56 00:03:12,240 --> 00:03:15,630 ‫and so all the state including the movie object 57 00:03:15,630 --> 00:03:17,190 ‫has been destroyed. 58 00:03:17,190 --> 00:03:20,940 ‫But still our function here remembers the title. 59 00:03:20,940 --> 00:03:22,740 ‫So how is that? 60 00:03:22,740 --> 00:03:25,530 ‫Well, it's because of a very important concept 61 00:03:25,530 --> 00:03:28,350 ‫in JavaScript called a closure. 62 00:03:28,350 --> 00:03:30,990 ‫So basically a closure in JavaScript 63 00:03:30,990 --> 00:03:35,100 ‫means that a function will always remember all the variables 64 00:03:35,100 --> 00:03:37,170 ‫that were present at the time 65 00:03:37,170 --> 00:03:40,280 ‫and the place data function was created. 66 00:03:40,280 --> 00:03:43,590 ‫So in the case of our cleanup function here, 67 00:03:43,590 --> 00:03:46,860 ‫it was created by the time this effect 68 00:03:46,860 --> 00:03:49,320 ‫first was created here. 69 00:03:49,320 --> 00:03:51,660 ‫And so by that time the title 70 00:03:51,660 --> 00:03:54,810 ‫was actually defined as "Inception." 71 00:03:54,810 --> 00:03:59,070 ‫So in this case, the movie that we were seeing before. 72 00:03:59,070 --> 00:04:03,510 ‫So it was "Inception" at the time this function was created. 73 00:04:03,510 --> 00:04:06,960 ‫And so therefore we say that dysfunction closed 74 00:04:06,960 --> 00:04:09,000 ‫over the title variable 75 00:04:09,000 --> 00:04:11,910 ‫and will therefore remember it in the future. 76 00:04:11,910 --> 00:04:14,640 ‫So in this case, even after the component 77 00:04:14,640 --> 00:04:17,550 ‫has already unmounted, okay. 78 00:04:17,550 --> 00:04:20,670 ‫So that was just a bit of a theoretical explanation 79 00:04:20,670 --> 00:04:22,830 ‫of what happens behind the scenes. 80 00:04:22,830 --> 00:04:26,070 ‫But I think it's pretty important to understand this idea 81 00:04:26,070 --> 00:04:29,970 ‫of closures because it is really a crucial part 82 00:04:29,970 --> 00:04:32,730 ‫of how effects work in React, 83 00:04:32,730 --> 00:04:34,320 ‫and therefore we will actually 84 00:04:34,320 --> 00:04:37,383 ‫also come back to this issue a bit later. 85 00:04:38,430 --> 00:04:41,010 ‫But anyway, I also want to show you 86 00:04:41,010 --> 00:04:45,420 ‫that the cleanup function runs between renderers. 87 00:04:45,420 --> 00:04:48,570 ‫So basically after each we render. 88 00:04:48,570 --> 00:04:51,060 ‫So if we click here, on some movie 89 00:04:51,060 --> 00:04:52,750 ‫and then we click on another one 90 00:04:53,700 --> 00:04:55,350 ‫let's say this one here, 91 00:04:55,350 --> 00:04:57,720 ‫then you see that the cleanup function 92 00:04:57,720 --> 00:05:00,900 ‫actually run again for this movie. 93 00:05:00,900 --> 00:05:04,667 ‫And so that happened right after the re-render, right? 94 00:05:06,270 --> 00:05:09,630 ‫Let's just clean this to watch that again. 95 00:05:09,630 --> 00:05:12,690 ‫So as I click here, there will be a re-render 96 00:05:12,690 --> 00:05:16,530 ‫and so again, then the previous effect was cleaned up 97 00:05:16,530 --> 00:05:19,953 ‫with the previous movie that we had selected before.