1 00:00:01,110 --> 00:00:02,550 ‫So the third part 2 00:00:02,550 --> 00:00:06,210 ‫of an effect is the cleanup function. 3 00:00:06,210 --> 00:00:09,090 ‫And so let's now come back to the timeline 4 00:00:09,090 --> 00:00:11,070 ‫that we have looked at before, 5 00:00:11,070 --> 00:00:13,983 ‫and the holes that we have left in it. 6 00:00:15,484 --> 00:00:17,910 ‫So remember that after the last effect run, 7 00:00:17,910 --> 00:00:21,240 ‫the title of the page in the browser tab was set 8 00:00:21,240 --> 00:00:24,630 ‫to Interstellar Wars, right? 9 00:00:24,630 --> 00:00:28,620 ‫However, once we unmounted the movie details component, 10 00:00:28,620 --> 00:00:31,890 ‫we would probably like the title to return 11 00:00:31,890 --> 00:00:35,583 ‫to the original text, which was simply usePopcorn, 12 00:00:36,540 --> 00:00:39,660 ‫so just the name of the application. 13 00:00:39,660 --> 00:00:41,580 ‫But how could we do that? 14 00:00:41,580 --> 00:00:45,630 ‫How can we ensure that the page title stays synchronized 15 00:00:45,630 --> 00:00:47,100 ‫with the application, 16 00:00:47,100 --> 00:00:50,490 ‫even after the component has disappeared? 17 00:00:50,490 --> 00:00:55,350 ‫Well, basically what we need is a way to execute some code 18 00:00:55,350 --> 00:00:57,750 ‫as the component unmounts. 19 00:00:57,750 --> 00:01:00,150 ‫And we can do exactly that 20 00:01:00,150 --> 00:01:05,150 ‫by returning a so-called cleanup function from the effect. 21 00:01:05,220 --> 00:01:07,980 ‫And in this case, that's simply a function 22 00:01:07,980 --> 00:01:10,413 ‫that sets the title back to usePopcorn. 23 00:01:11,880 --> 00:01:16,080 ‫All right, but you see that we still have another hole here 24 00:01:16,080 --> 00:01:19,203 ‫in the timeline, and that's because the cleanup function 25 00:01:19,203 --> 00:01:24,060 ‫that we return from the effect is actually also executed 26 00:01:24,060 --> 00:01:25,680 ‫on re-renders, 27 00:01:25,680 --> 00:01:30,123 ‫so right before the next effect is executed again. 28 00:01:31,380 --> 00:01:35,190 ‫So let's recap this important new information 29 00:01:35,190 --> 00:01:36,483 ‫that we just learned. 30 00:01:37,710 --> 00:01:40,560 ‫So the cleanup function is a function 31 00:01:40,560 --> 00:01:43,410 ‫that we can return from an effect, 32 00:01:43,410 --> 00:01:47,880 ‫and I say it can because the cleanup function is optional, 33 00:01:47,880 --> 00:01:51,780 ‫so we don't have to return one from the effect. 34 00:01:51,780 --> 00:01:56,160 ‫Now the cleanup function will run on two occasions. 35 00:01:56,160 --> 00:02:00,390 ‫First, it runs before the effect is executed again, 36 00:02:00,390 --> 00:02:02,610 ‫in order to clean up the results 37 00:02:02,610 --> 00:02:05,220 ‫of the previous side effect. 38 00:02:05,220 --> 00:02:07,080 ‫It also runs right 39 00:02:07,080 --> 00:02:10,350 ‫after the component instance has unmounted, 40 00:02:10,350 --> 00:02:14,520 ‫in order to give us the opportunity to reset the side effect 41 00:02:14,520 --> 00:02:18,210 ‫that we created, if that's necessary. 42 00:02:18,210 --> 00:02:21,630 ‫So remember that we have the dependency array, 43 00:02:21,630 --> 00:02:24,930 ‫in order to run code whenever the component mounts 44 00:02:24,930 --> 00:02:26,700 ‫or re-renders. 45 00:02:26,700 --> 00:02:30,030 ‫And now with the cleanup function, we also have a way 46 00:02:30,030 --> 00:02:34,590 ‫to run some code whenever the component unmounts. 47 00:02:34,590 --> 00:02:35,790 ‫And so with this, 48 00:02:35,790 --> 00:02:39,243 ‫we have the entire component life cycle covered. 49 00:02:40,200 --> 00:02:42,060 ‫Now you might be wondering, 50 00:02:42,060 --> 00:02:45,600 ‫when do we actually need a cleanup function? 51 00:02:45,600 --> 00:02:48,780 ‫Well, basically we need a cleanup function 52 00:02:48,780 --> 00:02:51,540 ‫whenever the side effect keeps happening 53 00:02:51,540 --> 00:02:56,130 ‫after the component has been re-rendered or unmounted. 54 00:02:56,130 --> 00:02:59,730 ‫For example, you might be doing an HTTP request 55 00:02:59,730 --> 00:03:01,680 ‫in your effect. 56 00:03:01,680 --> 00:03:04,350 ‫Now if the component is re-rendered 57 00:03:04,350 --> 00:03:07,530 ‫while the first request is still running, 58 00:03:07,530 --> 00:03:11,970 ‫a new second request would be fired off, right? 59 00:03:11,970 --> 00:03:16,320 ‫And so this might then create a bug called a race condition. 60 00:03:16,320 --> 00:03:20,250 ‫And therefore it's a good idea to cancel the request 61 00:03:20,250 --> 00:03:24,120 ‫in a cleanup function whenever the component re-renders 62 00:03:24,120 --> 00:03:25,590 ‫or unmounts. 63 00:03:25,590 --> 00:03:28,740 ‫And of course, there are many other examples. 64 00:03:28,740 --> 00:03:31,920 ‫So when you subscribe to some API service, 65 00:03:31,920 --> 00:03:34,260 ‫you should cancel the subscription. 66 00:03:34,260 --> 00:03:35,940 ‫When you start a timer, 67 00:03:35,940 --> 00:03:39,090 ‫you should stop the timer in the cleanup function. 68 00:03:39,090 --> 00:03:41,520 ‫Or if you add an event listener, 69 00:03:41,520 --> 00:03:44,640 ‫you should clean up by removing it. 70 00:03:44,640 --> 00:03:46,710 ‫Okay, and now to finish, 71 00:03:46,710 --> 00:03:50,370 ‫let me give you one more important rule about effects, 72 00:03:50,370 --> 00:03:55,370 ‫which is that each effect should only do one thing. 73 00:03:55,410 --> 00:03:57,900 ‫So if you need to create multiple effects 74 00:03:57,900 --> 00:04:01,170 ‫in your components, which is completely normal, 75 00:04:01,170 --> 00:04:04,200 ‫just use multiple useEffect hooks. 76 00:04:04,200 --> 00:04:08,100 ‫This not only makes each effect much easier to understand, 77 00:04:08,100 --> 00:04:09,930 ‫but it also makes effects easier 78 00:04:09,930 --> 00:04:13,260 ‫to clean up using a cleanup function. 79 00:04:13,260 --> 00:04:17,703 ‫And with that being said, let's return to our application.