Unsubscribing and memory leaks in Angular - Performance & Optimization

Performance: Unsubscribing and memory leaks

HIGH IMPACT

This concept affects the page's memory usage and responsiveness by preventing unnecessary background tasks and DOM updates.

Managing subscriptions to observables in Angular components

Angular

import { Component, OnInit, OnDestroy } from '@angular/core';
import { interval, Subscription } from 'rxjs';

@Component({ selector: 'app-good', template: '<p>Good example</p>' })
export class GoodComponent implements OnInit, OnDestroy {
  private sub?: Subscription;

  ngOnInit() {
    this.sub = interval(1000).subscribe(val => console.log(val));
  }

  ngOnDestroy() {
    this.sub?.unsubscribe();
  }
}

Unsubscribes on component destroy, freeing memory and stopping unnecessary event processing.

📈 Performance GainPrevents memory leaks and reduces INP by stopping background tasks when not needed.

Managing subscriptions to observables in Angular components

Angular

import { Component, OnInit } from '@angular/core';
import { interval } from 'rxjs';

@Component({ selector: 'app-bad', template: '<p>Bad example</p>' })
export class BadComponent implements OnInit {
  ngOnInit() {
    interval(1000).subscribe(val => console.log(val));
  }
}

Subscription is never unsubscribed, causing memory to grow and events to keep firing even after component destruction.

📉 Performance CostCauses memory leaks and increases INP by blocking main thread with unnecessary event handling.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
No unsubscribe	N/A (keeps event listeners active)	Triggers multiple reflows indirectly via change detection	Increased paint cost due to unnecessary updates	[X] Bad
Unsubscribe on destroy	No extra DOM operations after destroy	No reflows triggered after unsubscribe	Minimal paint cost after unsubscribe	[OK] Good

Rendering Pipeline

Subscriptions keep event listeners active, which can trigger change detection and DOM updates even when the component is not visible, increasing CPU and memory usage.

→JavaScript Execution

→Layout

→Paint

⚠️ BottleneckJavaScript Execution due to unnecessary event handling and change detection cycles

Core Web Vital Affected

INP

This concept affects the page's memory usage and responsiveness by preventing unnecessary background tasks and DOM updates.

Optimization Tips

1Always unsubscribe from observables in ngOnDestroy to prevent memory leaks.

2Use Angular's async pipe when possible to auto-manage subscriptions.

3Avoid long-running subscriptions that continue after component destruction.

Performance Quiz - 3 Questions

What is the main performance risk of not unsubscribing from observables in Angular components?

A Increased CSS paint time

B Memory leaks and slower input responsiveness

C Slower initial page load

D Longer network requests

DevTools: Performance

How to check: Record a performance profile while navigating to and from the component multiple times. Look for increasing memory usage or long scripting tasks after component destruction.

What to look for: Memory graph should not grow continuously; scripting time should drop after component is destroyed indicating no lingering subscriptions.