easyPhone Screen

What is the purpose of the cleanup function in useEffect?

Q: What is the purpose of the cleanup function in useEffect?

**Core concept (TL;DR).** The **cleanup** is the function you return from useEffect . React runs it **before re-running the effect** and **when the component unmounts**, so it can undo whatever the previous effect set up — unsubscribe, clearInterval , abort a request, remove a listener. Without it you get memory leaks and stale, duplicated subscriptions. Each effect cleans up the previous one effect (deps

51 views

Understand the problem

Understanding how to manage resource leaks in functional components.

hookslifecycle

Attempt it yourself

Sketch your approach before reading the solution — that's what interviews test.

Stuck? AI Nudge Available

Get a conceptual hint to guide your logic without spoiling the final implementation.

Study the solution

The solution is waiting

Give it an honest attempt first — then compare your thinking with the full walkthrough.

Read the code

clearInterval in cleanup

import { useState, useEffect } from "react";

export default function App() {
  const [seconds, setSeconds] = useState(0);

  useEffect(() => {
    const id = setInterval(() => setSeconds((s) => s + 1), 1000);
    return () => clearInterval(id); // cleanup → no leaked timer
  }, []);

  return (
    <div style={{ padding: 24, fontFamily: "system-ui" }}>
      Elapsed: <strong>{seconds}s</strong>
    </div>
  );
}

Join the discussion

Discussion (0)

No responses yet. Be the first to share what you think.

What is `create-react-app` and when would you use it?

What are React's design principles?