How do you avoid memory leaks from subscriptions? | Interview Question

Q: How do you avoid memory leaks from subscriptions?

**Target Audience:** Angular developers who subscribe to Observables in components and services — assumes basic RxJS, explains every cleanup mechanism from scratch. **Difficulty:** Medium > **How to read this doc:** Plain language first, then 📌 Interview term: callouts. Instead of asserting which patterns leak, every claim below was measured: the example's Observables count their own live subscriptions, the component is destroyed, and the counts are printed. Run on Angular 22.2.3 with RxJS 7.8.2, compiled with ngc and in the playground JIT mode, in jsdom. ## 1. Why This Even Matters — A Story First You move out of a flat but forget to cancel the newspaper delivery. Nothing bad happens on day one. But every morning a paper lands on the doormat of an empty flat, the pile grows, and if you move out of three more flats the same way, four papers are being delivered for a person who reads none of them. A component that subscribes to a long-lived stream and does

The problem

Question presented to candidate: "Users report the dashboard gets slower every time they navigate away and back, and the logs show the same handler firing several times per event. How would you find and fix subscription leaks in an Angular 22 app?"

What a strong answer should cover:

Why it leaks: a subscribe() to a long-lived source (a root service Subject, router events, interval, a websocket) keeps running after the component is destroyed; its callback keeps the component in memory and fires on every event.
What does not need cleanup: sources that complete by themselves, such as a single HttpClient call or take(1), release on completion.
Preferred fixes: let Angular own the subscription: the async pipe, toSignal(), or takeUntilDestroyed() (in an injection context, or takeUntilDestroyed(destroyRef) elsewhere). DestroyRef.onDestroy for anything else.
Older patterns still valid: a destroy$ Subject with takeUntil, or a Subscription bag unsubscribed in ngOnDestroy.
Operator placement: takeUntil must be the last operator, after switchMap and friends, or the inner subscription survives.
How to detect: count active subscriptions in a test after fixture.destroy(), heap snapshots for detached components, and lint rules.

Clarifying questions expected:

"Which sources does the dashboard subscribe to: HTTP only, or store and socket streams too?"
"Is it signal-based already, or subscribe() in ngOnInit?"

Code / implementation expected: Yes — several subscription styles in one component, with live subscriptions counted after it is destroyed.

rxjs
unsubscribe

Try it yourself

Sketch your approach before you read the solution. That is what the interview tests.

Stuck? Get a hint.

A short nudge toward the approach. It will not give the answer away.

Solution

Target Audience: Angular developers who subscribe to Observables in components and services — assumes basic RxJS, explains every cleanup mechanism from scratch. Difficulty: Medium

How to read this doc: Plain language first, then 📌 Interview term: callouts. Instead of asserting which patterns leak, every claim below was measured: the example's Observables count their own live subscriptions, the component is destroyed, and the counts are printed. Run on Angular 22.2.3 with RxJS 7.8.2, compiled with ngc and in the playground JIT mode, in jsdom.

1. Why This Even Matters — A Story First

You move out of a flat but forget to cancel the newspaper delivery. Nothing bad happens on day one. But every morning a paper lands on the doormat of an empty flat, the pile grows, and if you move out of three more flats the same way, four papers are being delivered for a person who reads

The solution is hidden so you can try first

9 min read · 10 sections

Read the code

AngularSeven ways to subscribe, counted after the component is destroyed

Open in playground

import { Component, DestroyRef, Injectable, inject, signal } from "@angular/core";
import { AsyncPipe } from "@angular/common";
import { takeUntilDestroyed, toSignal } from "@angular/core/rxjs-interop";
import { BehaviorSubject, Observable, Subject, switchMap, takeUntil } from "rxjs";

// A root service whose stream never completes (like a WebSocket, a store, or router events).
@Injectable({ providedIn: "root" })
export class Ticker {
  active = signal<Record<string, number>>({});
  ticks(tag: string): Observable<number> {
    return new Observable<number>((sub) => {
      this.bump(tag, +1);
      let n = 0;
      const id = setInterval(() => sub.next(++n), 100);
      return () => { clearInterval(id); this.bump(tag, -1); }; // runs on unsubscribe
    });
  }
  private bump(tag: string, d: number) {
    this.active.update((a) => ({ ...a, [tag]: (a[tag] ?? 0) + d }));
  }
}

@Component({
  selector: "app-widget",
  imports: [AsyncPipe],
  template: `<p>widget alive: {{ viaAsync$ | async }} / {{ viaSignal() }}</p>`,
})
export class WidgetComponent {
  private ticker = inject(Ticker);
  private destroyRef = inject(DestroyRef);
  private destroy$ = new Subject<void>();

  viaAsync$ = this.ticker.ticks("async pipe");                                // template owns it
  viaSignal = toSignal(this.ticker.ticks("toSignal"), { initialValue: 0 });   // DestroyRef owns it

  constructor() {
    this.ticker.ticks("1 plain subscribe (LEAK)").subscribe();
    this.ticker.ticks("takeUntilDestroyed()").pipe(takeUntilDestroyed()).subscribe();
    this.ticker.ticks("takeUntil(destroy$)").pipe(takeUntil(this.destroy$)).subscribe();

    const outer = new BehaviorSubject("go");
    outer.pipe(takeUntil(this.destroy$), switchMap(() => this.ticker.ticks("2 takeUntil before switchMap (LEAK)"))).subscribe();
  }

  ngOnInit() {
    // Outside the constructor there is no injection context: pass the DestroyRef in.
    this.ticker.ticks("takeUntilDestroyed(ref) in ngOnInit").pipe(takeUntilDestroyed(this.destroyRef)).subscribe();
  }

  ngOnDestroy() { this.destroy$.next(); this.destroy$.complete(); }
}

@Component({
  selector: "app-root",
  imports: [WidgetComponent],
  template: `
    <button (click)="show.set(false)">Destroy widget</button>
    @if (show()) { <app-widget /> }
    <ul>
      @for (row of rows(); track row[0]) { <li>{{ row[0] }}: {{ row[1] }} active</li> }
    </ul>
  `,
})
export class AppComponent {
  show = signal(true);
  private ticker = inject(Ticker);
  rows = () => Object.entries(this.ticker.active()).sort();
}

Discussion

Other approaches, follow-ups and how it went in real interviews.

Sign in to join the discussion.

No comments yet. Share how you would answer it.

The solution is hidden so you can try first

Keep your momentum going.