Find a memory leak

Medium30 minFree, no account

Heap grows 8MB an hour, nothing crashes for two days, and the suspect list is short.

The question

A single-page dashboard grows from 90MB to 1.2GB over a working day and eventually becomes unusable.

The code below is the component people suspect. Say what you would measure, and what is actually wrong here.

function LiveChart({ metricId }) {
  const [points, setPoints] = useState([]);

  useEffect(() => {
    const socket = connect(`/metrics/${metricId}`);
    socket.on("point", (p) => setPoints((prev) => [...prev, p]));

    window.addEventListener("resize", () => redraw(canvasRef.current));

    const id = setInterval(() => fetchSummary(metricId), 5000);
  }, [metricId]);

  return <canvas ref={canvasRef} />;
}

// the dashboard mounts and unmounts ~40 of these an hour

30:00Commit to an answer before you open the solution. Reading it first teaches you to recognise good answers, which is not the skill being tested.

Stuck?

0 of 3 hints taken

The worked solution

written by a person · not a grade

Score yourself

0 of 5 marked

Proposed a measurement before a fix, naming snapshot comparison25
Found the missing cleanup and all of the resources it should release30
Identified the anonymous listener as unremovable and why20
Caught the unbounded array15
Said what to monitor in production10

We run no AI here and nothing on this page grades you. The score is yours, and the useful number is the one you get on the same problem a month from now, cold.

kept in this browser only