Memory Leaks 101

// Real-world example: Memory leak detection and prevention in a React-like application
interface Subscription {
  unsubscribe(): void;
}

interface CacheOptions {
  maxSize?: number;
  ttl?: number;
}

// Memory-safe cache implementation with size and TTL limits
class LRUCache<K, V> {
  private cache: Map<K, { value: V; timestamp: number }>;
  private maxSize: number;
  private ttl: number;

  constructor(options: CacheOptions = {}) {
    this.cache = new Map();
    this.maxSize = options.maxSize || 1000;
    this.ttl = options.ttl || 3600000; // 1 hour default
    
    // Periodic cleanup to prevent memory leaks
    setInterval(() => this.cleanup(), 60000);
  }

  set(key: K, value: V): void {
    // Enforce size limit
    if (this.cache.size >= this.maxSize) {
      const oldestKey = this.cache.keys().next().value;
      this.cache.delete(oldestKey);
    }

    this.cache.set(key, {
      value,
      timestamp: Date.now()
    });
  }

  get(key: K): V | undefined {
    const item = this.cache.get(key);
    
    if (!item) return undefined;

    // Check TTL
    if (Date.now() - item.timestamp > this.ttl) {
      this.cache.delete(key);
      return undefined;
    }

    return item.value;
  }

  private cleanup(): void {
    const now = Date.now();
    for (const [key, item] of this.cache.entries()) {
      if (now - item.timestamp > this.ttl) {
        this.cache.delete(key);
      }
    }
  }
}

// Memory-safe event emitter with automatic cleanup
class EventEmitter {
  private events: Map<string, Set<WeakRef<Function>>>;
  private cleanupInterval: number;

  constructor() {
    this.events = new Map();
    
    // Periodic cleanup of dead references
    this.cleanupInterval = setInterval(() => this.cleanup(), 30000);
  }

  on(event: string, callback: Function): Subscription {
    if (!this.events.has(event)) {
      this.events.set(event, new Set());
    }

    const callbacks = this.events.get(event)!;
    const weakCallback = new WeakRef(callback);
    callbacks.add(weakCallback);

    return {
      unsubscribe: () => {
        callbacks.delete(weakCallback);
        if (callbacks.size === 0) {
          this.events.delete(event);
        }
      }
    };
  }

  emit(event: string, ...args: any[]): void {
    const callbacks = this.events.get(event);
    if (!callbacks) return;

    for (const weakCallback of callbacks) {
      const callback = weakCallback.deref();
      if (callback) {
        callback(...args);
      } else {
        callbacks.delete(weakCallback);
      }
    }
  }

  private cleanup(): void {
    for (const [event, callbacks] of this.events.entries()) {
      for (const weakCallback of callbacks) {
        if (!weakCallback.deref()) {
          callbacks.delete(weakCallback);
        }
      }
      if (callbacks.size === 0) {
        this.events.delete(event);
      }
    }
  }

  destroy(): void {
    clearInterval(this.cleanupInterval);
    this.events.clear();
  }
}

// Memory-safe component base class
abstract class Component {
  private subscriptions: Set<Subscription>;
  private timers: Set<number>;
  private eventEmitter: EventEmitter;
  private mounted: boolean;

  constructor() {
    this.subscriptions = new Set();
    this.timers = new Set();
    this.eventEmitter = new EventEmitter();
    this.mounted = false;
  }

  protected onMount(): void {
    this.mounted = true;
  }

  protected onUnmount(): void {
    this.mounted = false;
    this.cleanup();
  }

  // Safe subscription management
  protected subscribe(subscription: Subscription): void {
    this.subscriptions.add(subscription);
  }

  // Safe timer management
  protected setTimeout(callback: () => void, delay: number): number {
    const id = window.setTimeout(() => {
      if (this.mounted) {
        callback();
      }
      this.timers.delete(id);
    }, delay);
    
    this.timers.add(id);
    return id;
  }

  protected setInterval(callback: () => void, delay: number): number {
    const id = window.setInterval(() => {
      if (!this.mounted) {
        clearInterval(id);
        this.timers.delete(id);
        return;
      }
      callback();
    }, delay);
    
    this.timers.add(id);
    return id;
  }

  // Safe event listener management
  protected addEventListener(
    target: EventTarget,
    type: string,
    listener: EventListener,
    options?: AddEventListenerOptions
  ): void {
    target.addEventListener(type, listener, options);
    this.subscriptions.add({
      unsubscribe: () => target.removeEventListener(type, listener)
    });
  }

  private cleanup(): void {
    // Clear subscriptions
    for (const subscription of this.subscriptions) {
      subscription.unsubscribe();
    }
    this.subscriptions.clear();

    // Clear timers
    for (const timer of this.timers) {
      clearTimeout(timer);
    }
    this.timers.clear();

    // Cleanup event emitter
    this.eventEmitter.destroy();
  }
}

// Example usage
class DataGrid extends Component {
  private cache: LRUCache<string, any>;
  
  constructor() {
    super();
    this.cache = new LRUCache({ maxSize: 100, ttl: 300000 }); // 5 minutes TTL
  }

  protected onMount(): void {
    super.onMount();

    // Safe event listener
    this.addEventListener(window, 'resize', this.handleResize);

    // Safe interval
    this.setInterval(this.refreshData, 60000);

    // Safe subscription
    const subscription = dataService.subscribe(
      this.handleDataUpdate
    );
    this.subscribe(subscription);
  }

  private handleResize = () => {
    // Handle resize logic
  };

  private refreshData = () => {
    // Refresh data logic
  };

  private handleDataUpdate = (data: any) => {
    this.cache.set('latestData', data);
  };
}