Memory leaks gradually reduce the responsiveness of React applications. At first everything feels normal, but after extended usage — around 10 to 15 minutes — the UI may start lagging, animations become choppy, and in severe cases the application can freeze or crash completely.
Frequent Causes of Memory Leaks in React
1. Timers and intervals that are never cleared
// ❌ Risky: interval continues even after component removal
function AutoCounter() {
const [value, setValue] = useState(0);
useEffect(() => {
window.setInterval(() => {
setValue((previous) => previous + 1);
}, 1000);
// No interval cleanup
}, []);
return <div>{value}</div>;
}
// ✅ Better: clear interval during unmount
function ManagedAutoCounter() {
const [value, setValue] = useState(0);
useEffect(() => {
const timer = window.setInterval(() => {
setValue((previous) => previous + 1);
}, 1000);
return () => {
window.clearInterval(timer);
};
}, []);
return <div>{value}</div>;
}
2. Event handlers that remain attached:
// ❌ Incorrect: listener remains active after unmount
function ResponsiveLayout() {
useEffect(() => {
window.addEventListener('resize', updateViewportSize);
// Cleanup is missing
}, []);
return <div>Responsive page</div>;
}
// ✅ Correct: unregister listener during cleanup
function SafeResponsiveLayout() {
useEffect(() => {
window.addEventListener('resize', updateViewportSize);
return () => {
window.removeEventListener('resize', updateViewportSize);
};
}, []);
return <div>Responsive page</div>;
}
3. WebSocket sessions left active:
// ❌ Problematic: socket connection is never terminated
function RealtimeFeed() {
useEffect(() => {
const socket = new WebSocket('wss://stream.example.dev');
socket.onmessage = receiveLiveUpdate;
// No cleanup logic
}, []);
return <div>Streaming updates...</div>;
}
// ✅ Safer approach: disconnect on component cleanup
function StableRealtimeFeed() {
useEffect(() => {
const socket = new WebSocket('wss://stream.example.dev');
socket.onmessage = receiveLiveUpdate;
return () => {
socket.close();
};
}, []);
return <div>Streaming updates...</div>;
}
4. Retaining references to heavy data objects:
// ❌ Inefficient: keeps heavy data in memory
function InefficientComponent({ dataset }) {
const cacheRef = useRef(null);
useEffect(() => {
// Stores transformed data without cleanup
cacheRef.current = transformDataset(dataset);
}, [dataset]);
return <div>Data ready</div>;
}
// ✅ Improved: clears unused references properly
function OptimizedComponent({ dataset }) {
const cacheRef = useRef(null);
useEffect(() => {
cacheRef.current = transformDataset(dataset);
return () => {
// Remove retained reference during cleanup
cacheRef.current = undefined;
};
}, [dataset]);
return <div>Data ready</div>;
}
Memory Leak Detection Checklist
| Leak Category | Detection Technique | Severity | Estimated Fix Time | Fix Difficulty |
|---|---|---|---|---|
| Unremoved event listeners | Inspect with memory profiling tools | High | 5–10 minutes | Low |
| Uncleared timers or intervals | Check console warnings and logs | High | 2–5 minutes | Low |
| Persistent WebSocket connections | Monitor through the Network panel | High | 10–20 minutes | Low |
| Retained large object references | Compare heap snapshots | Medium | 15–30 minutes | Medium |
| Unintended closure retention | Analyze heap snapshots | Medium | 20–40 minutes | High |
| Lingering DOM node references | Track using memory profiler | Low | 30–60 minutes | Low |
// Enable only during local development
if (process.env.NODE_ENV === 'development') {
useEffect(() => {
const monitorHeapUsage = () => {
if (!performance.memory) return;
const heapSizeInMB =
performance.memory.usedJSHeapSize / (1024 * 1024);
console.log(
`[Heap Monitor] Current usage: ${heapSizeInMB.toFixed(2)} MB`
);
// Warn when memory consumption becomes unusually high
if (heapSizeInMB >= 200) {
console.warn(
'[Heap Monitor] Potential memory leak detected.'
);
}
};
// Run memory inspection every 5 seconds
const timerId = window.setInterval(monitorHeapUsage, 5000);
return () => {
window.clearInterval(timerId);
};
}, []);
}
Chrome DevTools provides a Memory profiling tool that helps identify memory leaks through heap snapshots and allocation tracking. A common workflow is to capture one snapshot before a user action and another afterward, then compare the results to detect objects that remain unexpectedly in memory.
If certain objects continue to exist even though they are no longer needed and should have been garbage collected, this usually suggests a memory retention issue or leak.