- Use a cleanup function with
useEffect
to stop background processes
In the last lesson, we saw how to run functions as side effects of rendering
our components by using the useEffect
hook. Here, we'll discuss best practices
when it comes to cleaning up after those functions so we don't have unnecessary
code running in the background when we no longer need it.
When using the useEffect
hook in a component, you might end up with some
long-running code that you no longer need once the component is removed from the
page. Here's an example of a component that runs a timer in the background
continuously:
function Clock() {
const [time, setTime] = useState(new Date());
useEffect(() => {
setInterval(() => {
setTime(new Date());
}, 1000);
}, []);
return <div>{time.toString()}</div>;
}
When the component first renders, the useEffect
hook will run and create an
interval. That interval will run every 1 second in the background, and set the
time.
We could use this Clock component like so:
function App() {
const [showClock, setShowClock] = useState(true);
return (
<div>
{showClock ? <Clock /> : null}
<button onClick={() => setShowClock(!showClock)}>Toggle Clock</button>
</div>
);
}
When the button is clicked, we want to remove the clock from the DOM. That
also means we should stop the setInterval
from running in the background. We
need some way of cleaning up our side effect when the component is no longer
needed!
To demonstrate the issue, try clicking the "Toggle Clock" button — you'll likely see a warning message like this:
index.js:1 Warning: Can't perform a React state update on an unmounted
component. This is a no-op, but it indicates a memory leak in your application.
To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup
function.
The reason for this message is that even after removing our Clock
component
from the DOM, the setInterval
function we called in useEffect
is still
running in the background, and updating state every second.
React's solution is to have our useEffect
function return a cleanup
function, which will run when the component is unmounted, i.e., when it is no
longer being returned by its parent.
Here's how the cleanup function would look:
function Clock() {
const [time, setTime] = useState(new Date());
useEffect(() => {
const timerID = setInterval(() => {
setTime(new Date());
}, 1000);
// returning a cleanup function
return function cleanup() {
clearInterval(timerID);
};
}, []);
return <div>{time.toString()}</div>;
}
If you run this app again in the browser, and click the "Toggle Clock" button,
you'll notice we no longer get that error message. That's because we have
successsfully cleaned up after the unmounted component by running
clearInterval
.
So far, we've explained the order of operations for our components like this:
render -> useEffect -> setState -> re-render -> useEffect
Where does the cleanup function fit in this order of operations? To understand
how the process works, let's think about the full component lifecycle. When the
page loads initially, our clock is rendered to the page and useEffect
is
called for the first time, initiating the interval. When the page is
re-rendered — i.e., when the Toggle button is clicked and setState
is called
— the cleanup function will be called right after the re-render happens:
render -> useEffect -> setState -> re-render -> cleanup
In our example, the update to the page causes the component to be unmounted so the cleanup is the last thing that occurs in the component's life. If, instead, the state of our component were being updated in some way — for example, if we had a button that would toggle between 12-hour and 24-hour time — the process would look like this:
render -> useEffect -> setState -> re-render -> cleanup -> useEffect
Here's a way to visualize the different parts of the component lifecycle:
You can also check out this
CodeSandbox example to
visualize the component lifecycle. The code includes a series of calls to
useEffect
that log messages to the console. If you open the browser console,
you can see the sequence of events that happens when the page first loads. Then,
if you try clicking the buttons, the order of the logged messages will show the
order in which the different stages occur. Note that, for each component
(Parent
and Child
), there are three different useEffect
calls: one with no
dependencies array, one with an empty array, and one with count
as a
dependency. This enables you to see when useEffect
and cleanup
are called
for each of the three options.
Cleanup functions like this are useful if you have a long-running function that you want to unsubscribe from when the component is no longer on the page. Common examples include:
- a timer running via
setInterval
- a subscription to a web socket connection
You don't always have to use a cleanup function as part of your useEffect
code, but it's good to know what scenarios make this functionality useful.