Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
Since components do not always stay in the DOM, React also provides the componentWillUnmount lifecycle method to help you handle unmounting of components. This can help prevent memory leaks in your application.
There's an issue in our Stopwatch
component that we should address and fix.
0:00
We're using the setInterval method
in componentDidMount to call and
0:03
execute the tick function over and
over again.
0:07
If for some reason we were to unmount or
remove the Stopwatch component from
0:10
the DOM, setInterval would still keep
calling the tick function repeatedly.
0:13
Because setInterval doesn't get cleared,
it will cause a memory leak,
0:18
which can negatively impact
the performance of our app.
0:21
I've created a separate example
to show you what I mean.
0:24
In this example Scoreboard app,
when I click the title in the header,
0:27
the Stopwatch component gets
unmounted from the DOM, it's gone.
0:30
I'll refresh the app to
bring back the stopwatch.
0:34
Now I'm logging the elapsed
time value to the console,
0:37
which you can see once I
click the Start the timer.
0:40
It's logging each value
by the millisecond now.
0:42
But notice what happens when I click
the title to unmount the stopwatch.
0:45
We get a bright red warning on the console
that says can't call setState or
0:50
forceUpdate on an unmounted component.
0:54
This is a no-op, but it indicates
a memory leak in your application.
0:56
You see, the stopwatch was unmounted, but
the tick function is still in memory,
1:01
attempting to update a state
that no longer exists.
1:06
The interval we set in
componentDidMount is never cleared, and
1:09
that's the memory leak.
1:12
This shouldn't be a problem in our
application because the stopwatch is
1:14
always visible.
1:17
There's no way to make it unmount.
1:18
But say we had this stopwatch
in an app with multiple pages or
1:20
if we provided a way for users to visibly
toggle the stopwatch between a visible and
1:24
hidden state.
1:27
Forgetting to clear and
remove the interval could cause problems.
1:28
Since components do not
always stay in the DOM,
1:32
React also provides the
componentWillUnmount life cycle method to
1:35
help you handle unmounting of components.
1:39
So in Stopwatch.js let's
add componentWillUnmount.
1:41
componentWillUnmount is invoked just
before a component instance is unmounted
1:50
and destroyed.
1:54
So you can use it to clear
anything that needs to be cleared
1:56
when a component is removed from the DOM.
1:58
Inside the method,
2:01
we'll clear the interval by calling
the JavaScript clearInterval method.
2:02
clearInterval cancels any timed repeating
actions created by calling setInterval.
2:07
Let's pass it the interval ID
to clear with this.intervalID.
2:13
So now, we've safely cleaned up
the intervals set in componentDidMount.
2:19
As soon as the Stopwatch component mounts,
the interval is set,
2:23
repeatedly calling tick.
2:27
And if for some reason the Stopwatch
no longer needs to be rendered,
2:29
the componentWillUnmount method
will clear the interval so
2:32
that it's no longer ticking away and
taking up memory.
2:36
In my separate example here, I have
added the same componentWillUnmount and
2:40
clearInterval methods to the stopwatch.
2:44
Inside componentWillUnmount,
I also logged a message to the console.
2:46
Notice what happens now
when I start the stopwatch
2:50
then click the title to
unmount the stopwatch.
2:53
The timer stops and we see the message,
I've Been Cleared and
2:57
Unmounted, logged to the console.
3:00
The interval is no longer
running endlessly and uselessly.
3:01
And there's no warning
message in the console.
3:05
So anytime you use the componentDidMount
life cycle method,
3:07
you should also be thinking about what
might happen when the component unmounts.
3:10
Since componentWillUnmount
is an unmounting method,
3:15
it's where you should perform any
clean-ups that should be done.
3:18
Like clearing timers,
canceling active network requests, or
3:22
tearing down any DOM elements or event
listeners created in componentDidMount.
3:26
You can read a whole lot more about React
life cycle methods in the teacher's notes.
3:30
I've also posted a link to a Treehouse
video that teaches you how to fetch data
3:34
using componentDidMount.
3:37
You need to sign up for Treehouse in order to download course files.
Sign up