mediumFrontend

How do you handle memory leaks in React?

Q: How do you handle memory leaks in React?

**Core concept (TL;DR).** Memory leaks come from **work that outlives the component**: uncleaned timers, subscriptions, event listeners, or a pending request that calls setState after unmount. The fix is to **clean up in useEffect 's return**: clear timers, unsubscribe, remove listeners, and abort/ignore in-flight requests. Tear down everything the effect set up setInterval → clearInterval <rect x="20" y="74" width="232" he

724 views

Understand the problem

Identifying and resolving common memory leak vectors in single-page apps.

performancehooksdebugging

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

Cleanup prevents the timer leak

import { useState, useEffect } from "react";

export default function App() {
  const [show, setShow] = useState(true);
  return (
    <div style={{ padding: 24, fontFamily: "system-ui" }}>
      <button onClick={() => setShow((s) => !s)}>Toggle</button>
      {show && <Ticker />}
    </div>
  );
}

function Ticker() {
  const [n, setN] = useState(0);
  useEffect(() => {
    const id = setInterval(() => setN((x) => x + 1), 500);
    return () => clearInterval(id);   // without this, the timer leaks after unmount
  }, []);
  return <p>tick: {n}</p>;
}

Join the discussion

Discussion (0)

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

How do you handle routing in React applications?

How do you prevent unnecessary re-renders in functional components?