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.