1 00:00:00,150 --> 00:00:03,790 There's an issue in our Stopwatch component that we should address and fix. 2 00:00:03,790 --> 00:00:07,430 We're using the setInterval method in componentDidMount to call and 3 00:00:07,430 --> 00:00:10,320 execute the tick function over and over again. 4 00:00:10,320 --> 00:00:13,930 If for some reason we were to unmount or remove the Stopwatch component from 5 00:00:13,930 --> 00:00:18,340 the DOM, setInterval would still keep calling the tick function repeatedly. 6 00:00:18,340 --> 00:00:21,861 Because setInterval doesn't get cleared, it will cause a memory leak, 7 00:00:21,861 --> 00:00:24,605 which can negatively impact the performance of our app. 8 00:00:24,605 --> 00:00:27,412 I've created a separate example to show you what I mean. 9 00:00:27,412 --> 00:00:30,990 In this example Scoreboard app, when I click the title in the header, 10 00:00:30,990 --> 00:00:34,460 the Stopwatch component gets unmounted from the DOM, it's gone. 11 00:00:34,460 --> 00:00:37,589 I'll refresh the app to bring back the stopwatch. 12 00:00:37,589 --> 00:00:40,339 Now I'm logging the elapsed time value to the console, 13 00:00:40,339 --> 00:00:42,808 which you can see once I click the Start the timer. 14 00:00:42,808 --> 00:00:45,774 It's logging each value by the millisecond now. 15 00:00:45,774 --> 00:00:50,025 But notice what happens when I click the title to unmount the stopwatch. 16 00:00:50,025 --> 00:00:54,117 We get a bright red warning on the console that says can't call setState or 17 00:00:54,117 --> 00:00:56,790 forceUpdate on an unmounted component. 18 00:00:56,790 --> 00:01:01,000 This is a no-op, but it indicates a memory leak in your application. 19 00:01:01,000 --> 00:01:06,160 You see, the stopwatch was unmounted, but the tick function is still in memory, 20 00:01:06,160 --> 00:01:09,290 attempting to update a state that no longer exists. 21 00:01:09,290 --> 00:01:12,740 The interval we set in componentDidMount is never cleared, and 22 00:01:12,740 --> 00:01:13,640 that's the memory leak. 23 00:01:14,640 --> 00:01:17,780 This shouldn't be a problem in our application because the stopwatch is 24 00:01:17,780 --> 00:01:18,840 always visible. 25 00:01:18,840 --> 00:01:20,630 There's no way to make it unmount. 26 00:01:20,630 --> 00:01:24,110 But say we had this stopwatch in an app with multiple pages or 27 00:01:24,110 --> 00:01:27,920 if we provided a way for users to visibly toggle the stopwatch between a visible and 28 00:01:27,920 --> 00:01:28,950 hidden state. 29 00:01:28,950 --> 00:01:32,670 Forgetting to clear and remove the interval could cause problems. 30 00:01:32,670 --> 00:01:35,395 Since components do not always stay in the DOM, 31 00:01:35,395 --> 00:01:39,283 React also provides the componentWillUnmount life cycle method to 32 00:01:39,283 --> 00:01:41,820 help you handle unmounting of components. 33 00:01:41,820 --> 00:01:50,518 So in Stopwatch.js let's add componentWillUnmount. 34 00:01:50,518 --> 00:01:54,885 componentWillUnmount is invoked just before a component instance is unmounted 35 00:01:54,885 --> 00:01:56,180 and destroyed. 36 00:01:56,180 --> 00:01:58,950 So you can use it to clear anything that needs to be cleared 37 00:01:58,950 --> 00:02:01,430 when a component is removed from the DOM. 38 00:02:01,430 --> 00:02:02,490 Inside the method, 39 00:02:02,490 --> 00:02:07,610 we'll clear the interval by calling the JavaScript clearInterval method. 40 00:02:07,610 --> 00:02:13,530 clearInterval cancels any timed repeating actions created by calling setInterval. 41 00:02:13,530 --> 00:02:17,480 Let's pass it the interval ID to clear with this.intervalID. 42 00:02:19,210 --> 00:02:23,660 So now, we've safely cleaned up the intervals set in componentDidMount. 43 00:02:23,660 --> 00:02:27,250 As soon as the Stopwatch component mounts, the interval is set, 44 00:02:27,250 --> 00:02:29,260 repeatedly calling tick. 45 00:02:29,260 --> 00:02:32,370 And if for some reason the Stopwatch no longer needs to be rendered, 46 00:02:32,370 --> 00:02:36,470 the componentWillUnmount method will clear the interval so 47 00:02:36,470 --> 00:02:38,990 that it's no longer ticking away and taking up memory. 48 00:02:40,050 --> 00:02:44,128 In my separate example here, I have added the same componentWillUnmount and 49 00:02:44,128 --> 00:02:46,152 clearInterval methods to the stopwatch. 50 00:02:46,152 --> 00:02:50,150 Inside componentWillUnmount, I also logged a message to the console. 51 00:02:50,150 --> 00:02:53,670 Notice what happens now when I start the stopwatch 52 00:02:53,670 --> 00:02:57,040 then click the title to unmount the stopwatch. 53 00:02:57,040 --> 00:03:00,210 The timer stops and we see the message, I've Been Cleared and 54 00:03:00,210 --> 00:03:01,810 Unmounted, logged to the console. 55 00:03:01,810 --> 00:03:05,385 The interval is no longer running endlessly and uselessly. 56 00:03:05,385 --> 00:03:07,413 And there's no warning message in the console. 57 00:03:07,413 --> 00:03:10,816 So anytime you use the componentDidMount life cycle method, 58 00:03:10,816 --> 00:03:15,860 you should also be thinking about what might happen when the component unmounts. 59 00:03:15,860 --> 00:03:18,960 Since componentWillUnmount is an unmounting method, 60 00:03:18,960 --> 00:03:22,290 it's where you should perform any clean-ups that should be done. 61 00:03:22,290 --> 00:03:26,320 Like clearing timers, canceling active network requests, or 62 00:03:26,320 --> 00:03:30,670 tearing down any DOM elements or event listeners created in componentDidMount. 63 00:03:30,670 --> 00:03:34,360 You can read a whole lot more about React life cycle methods in the teacher's notes. 64 00:03:34,360 --> 00:03:37,860 I've also posted a link to a Treehouse video that teaches you how to fetch data 65 00:03:37,860 --> 00:03:38,930 using componentDidMount.