Debugging React Memory Leaks & Retained Closures

1import React, { useEffect, useState, useRef } from 'react';
2
3// LEAKY COMPONENT (Causes severe production memory leak!)
4export function LeakyTicker() {
5  const [ticks, setTicks] = useState<number[]>([]);
6
7  useEffect(() => {
8    // 1. LEAK 1: Interval is never cleared on unmount!
9    // Continues running in background, firing setState on unmounted component!
10    setInterval(() => {
11      setTicks((prev) => [...prev, Date.now()]);
12    }, 1000);
13
14    // 2. LEAK 2: Global window event listener never removed!
15    // Retains reference to this component closure forever in window listener registry!
16    window.addEventListener('resize', () => {
17      console.log('Window resized, current ticks count:', ticks.length);
18    });
19  }, []);
20
21  return <div>Active Ticks: {ticks.length}</div>;
22}
23
24// SECURE & CLEAN COMPONENT (Zero memory leaks!)
25export function SecureTicker() {
26  const [ticks, setTicks] = useState<number[]>([]);
27
28  useEffect(() => {
29    // 1. Retain interval ID for cleanup
30    const timerId = setInterval(() => {
31      setTicks((prev) => [...prev, Date.now()]);
32    }, 1000);
33
34    // 2. Define named event handler for exact removal
35    const handleResize = () => {
36      console.log('Window resized');
37    };
38    window.addEventListener('resize', handleResize);
39
40    // 3. EXHAUSTIVE CLEANUP FUNCTION: Runs synchronously upon unmount!
41    return () => {
42      clearInterval(timerId);
43      window.removeEventListener('resize', handleResize);
44    };
45  }, []); // Clean setup and teardown
46
47  return <div>Active Ticks: {ticks.length}</div>;
48}