ngOnDestroy for cleanup in Angular - Performance & Optimization

Performance: ngOnDestroy for cleanup

MEDIUM IMPACT

This affects the interaction responsiveness and memory usage by properly cleaning up resources when components are destroyed.

Cleaning up subscriptions and timers when a component is destroyed

Angular

import { Component, OnDestroy } from '@angular/core';
import { Subscription } from 'rxjs';
@Component({ selector: 'app-example', template: '' })
export class ExampleComponent implements OnDestroy {
  subscription: Subscription = someObservable.subscribe();
  timerId = setInterval(() => console.log('tick'), 1000);

  ngOnDestroy() {
    this.subscription.unsubscribe();
    clearInterval(this.timerId);
  }
}

Properly unsubscribes and clears timers when the component is destroyed, freeing memory and CPU resources.

📈 Performance GainPrevents memory leaks and reduces CPU usage, improving input responsiveness (INP).

Cleaning up subscriptions and timers when a component is destroyed

Angular

import { Component } from '@angular/core';
@Component({ selector: 'app-example', template: '' })
export class ExampleComponent {
  subscription = someObservable.subscribe();
  timerId = setInterval(() => console.log('tick'), 1000);
  // No ngOnDestroy implemented
}

Subscriptions and timers remain active after component destruction, causing memory leaks and unnecessary CPU usage.

📉 Performance CostLeads to increased memory usage over time and can cause input lag (INP) due to background tasks.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
No cleanup in ngOnDestroy	No direct DOM ops but leaves event listeners active	Triggers extra reflows indirectly due to background tasks	Increases paint cost due to unnecessary JS work	[X] Bad
Proper cleanup in ngOnDestroy	Removes event listeners and timers	No extra reflows triggered	Minimal paint cost, efficient rendering	[OK] Good

Rendering Pipeline

ngOnDestroy runs during the component destruction phase, allowing cleanup before the DOM nodes are removed. This prevents lingering event listeners and timers that could cause unnecessary work during rendering and interaction.

→JavaScript Execution

→Layout

→Paint

⚠️ BottleneckJavaScript Execution due to lingering subscriptions or timers causing extra work

Core Web Vital Affected

INP

This affects the interaction responsiveness and memory usage by properly cleaning up resources when components are destroyed.

Optimization Tips

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

2Clear timers and intervals in ngOnDestroy to avoid unnecessary CPU usage.

3Use DevTools Performance panel to verify no lingering tasks after component destruction.

Performance Quiz - 3 Questions

What is the main performance benefit of implementing ngOnDestroy for cleanup?

A Prevents memory leaks and reduces CPU usage by unsubscribing and clearing timers

B Improves initial page load speed by lazy loading components

C Reduces CSS selector complexity to speed up style calculation

D Minimizes DOM nodes to reduce layout time

DevTools: Performance

How to check: Record a session while navigating away from the component and watch for lingering JavaScript activity or memory usage that does not drop.

What to look for: Look for long tasks or continuous CPU usage after component destruction indicating missing cleanup.