Cleanup

Learn the useEffect cleanup function.

What is cleanup?

The function returned by useEffect is called cleanup. It runs right before the component is removed from screen (unmount). It is used to cancel subscriptions, clear timers or remove event listeners.

Cleanup also runs once before each effect re-run. This lets you release the old resource and set up a new one. If you skip cleanup, you can get subscription buildup (memory leak). You write it by returning return () => { /* ... */ } from the effect.

Cleanup examples

A typical cleanup example is a timer. You start a setInterval inside the effect and stop it with clearInterval in the returned function. So when the component is removed the timer does not keep running in the background.

A second example is an event listener. You add a listener with addEventListener and remove it with removeEventListener in cleanup. Without cleanup the listener keeps catching events even after the component is gone, which is unwanted.

Exercise Write a timer cleanup

Write a Timer component. Inside useEffect start a setInterval(() => console.log("ticking"), 1000). Return a cleanup function from the effect that calls clearInterval(id). The component returns <Text>Timer</Text>.

Show example solution

import { useEffect } from "react";
import { Text } from "react-native";

function Timer() {
  useEffect(() => {
    const id = setInterval(() => console.log("ticking"), 1000);
    return () => clearInterval(id);
  });
  return <Text>Timer</Text>;
}

Test yourself

When does cleanup run?

On unmount

Cleanup is called
Before re-running the effect

Old cleanup is called
Subscription

Released by cleanup
Timer

Cleared with clearInterval

Return the cleanup

useEffect(() => {
  const id = setInterval(tick, 1000);
  ____ () => clearInterval(id);
});

Show answer

useEffect(() => {
  const id = setInterval(tick, 1000);
  return () => clearInterval(id);
});

What is cleanup written for?
```
useEffect(() => {
  const id = setInterval(tick, 1000);
  return () => clearInterval(id);
});
```
- To create state
- To style the component
- To release the resource
- To add a new effect
Show answer

To release the resource — Cleanup releases the resource.

Next lesson: useRef

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies