Memory Profiling and Heap Snapshots in Production0%
Typing Functional Components and Props in TypeScript

Memory Profiling and Heap Snapshots in Production

Beginner12 min read•Updated: Jul 11, 2026
Study MaterialsCheatsheet

Memory Profiling and Heap Snapshots in Production

Frontend memory leaks quietly degrade web application performance over prolonged sessions. In single-page applications (SPAs) where users keep tabs open for days (e.g. enterprise CRM, Slack, Trading desks), memory leaks cause tabs to consume gigabytes of RAM, resulting in sluggish scrolling, browser stutter, and eventually Out of Memory (OOM) tab crashes.

1. Common Culprits of Memory Leaks in React

  1. 1
    Forgotten Event Listeners: Attaching window.addEventListener without cleaning up in useEffect.
  2. 2
    Uncleared Timers: setInterval or setTimeout references holding closures of component scopes.
  3. 3
    Detached DOM Nodes: JavaScript objects (caches, arrays, maps) holding references to DOM elements that have been removed from the visible document.
  4. 4
    Uncleared Observables / WebSockets: Unclosed RxJS subscriptions or WebSocket listener callbacks.
  5. 5
    Global Event Emitters: Registering handlers on singleton event buses without unregistering on unmount.

2. Taking Heap Snapshots in Chrome DevTools

To track memory leaks systematically:

  1. 1
    Open Chrome DevTools > Memory tab.
  2. 2
    Select Heap snapshot > click Take snapshot (Snapshot 1: Baseline).
  3. 3
    Perform the suspected action repeatedly (e.g., open and close an Analytics Modal 10 times).
  4. 4
    Click the trash can icon in the top left to force Garbage Collection (GC).
  5. 5
    Take Snapshot 2.
  6. 6
    Switch dropdown view from Summary to Comparison against Snapshot 1.
  7. 7
    Sort by Size Delta or filter by constructor:
  • Search Detached to see Detached HTMLDivElement or unmounted components.

3. Code Example: Fixing a Detached DOM & Closure Leak

Leaky Implementation

TSX
// ❌ Memory Leak: Uncleaned timer and DOM reference
import React, { useEffect, useState } from "react";
 
export function LeakyTicker() {
const [data, setData] = useState<number[]>([]);
 
useEffect(() => {
// Leaky: Interval continues running forever after component unmounts!
setInterval(() => {
setData((prev) => [...prev, Math.random()]);
}, 1000);
 
// Leaky: Attaches window listener without cleanup function
window.addEventListener("resize", () => {
console.log("Window resized", data);
});
}, []); // Notice data closure holds stale data array indefinitely
 
return <div>Ticker items: {data.length}</div>;
}

Clean Enterprise Implementation

TSX
// ✅ Memory Safe: Clean teardown of all resources
import React, { useEffect, useState } from "react";
 
export function CleanTicker() {
const [data, setData] = useState<number[]>([]);
 
useEffect(() => {
// 1. Store timer ID
const timerId = window.setInterval(() => {
setData((prev) => (prev.length > 50 ? [...prev.slice(1), Math.random()] : [...prev, Math.random()]));
}, 1000);
 
// 2. Stable listener reference
const handleResize = () => {
console.log("Window resized cleanly");
};
window.addEventListener("resize", handleResize);
 
// 3. MANDATORY: Cleanup function executed on unmount
return () => {
window.clearInterval(timerId);
window.removeEventListener("resize", handleResize);
};
}, []);
 
return <div className="font-mono text-cyan-400">Active telemetry buffers: {data.length}</div>;
}

4. Retainer Trees in DevTools

When inspecting detached nodes in a heap snapshot, DevTools displays the Retainer Tree at the bottom:

Output
Detached HTMLDivElement
└── context in system / Context
└── closure in handleDataStream()
└── globalListener in EventTarget

Follow the retainer chain from top to bottom to locate the exact variable, closure, or event handler preventing the garbage collector from reclaiming the memory.

Interactive Quiz

Practice Quiz

Question 1
What is a "Detached DOM Node" in the context of browser memory profiling?
Question 2
Why should you force Garbage Collection (trash can icon) before taking a heap comparison snapshot?
Question 3
What happens if an unmounted component leaves an active setInterval running?
Question 4
In Chrome DevTools Heap Snapshots, what does the "Retainer Tree" tell you?
Question 5
How can holding a reference to a parent DOM node in an unmounted component cause a massive leak?
Next Lesson

Typing Functional Components and Props in TypeScript

Continue learning with hands-on practice, examples, and exercises in the upcoming topic.

Related Lessons

Previous LessonNext Lesson
Optimizing React Re-render Bottlenecks with Fiber ArchitectureTyping Functional Components and Props in TypeScript

Practice Quiz

Test your understanding of this lesson with 5 questions. Each question has one correct answer.

PreviousNext
PrevNext