hardFrontend

How do you avoid memory leaks from subscriptions?

Q: How do you avoid memory leaks from subscriptions?

**Core concept.** An RxJS subscription keeps running until it completes or you unsubscribe — so a subscription created in a component that **isn't closed** keeps firing (and holding references) after the component is destroyed: a leak. Avoid it by preferring the ** async pipe**, or by tearing subscriptions down on destroy with takeUntilDestroyed() / a takeUntil(destroy$) pattern. no teardown runs after destroy → leak takeUntilDestroyed / async <text class='d-sub' x='345' y='90' text-anch

445 views

Understand the problem

Explain unsubscribe patterns.

rxjsunsubscribe

Attempt it yourself

Sketch your approach before reading the solution — that's what interviews test.

Stuck? AI Nudge Available

Get a conceptual hint to guide your logic without spoiling the final implementation.

Study the solution

The solution is waiting

Give it an honest attempt first — then compare your thinking with the full walkthrough.

Read the code

takeUntilDestroyed for a long-lived stream

import { Component } from '@angular/core';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
import { interval } from 'rxjs';

@Component({ selector: 'app-root', standalone: true, template: '{{ n }}' })
export class AppComponent {
  n = 0;
  constructor() {
    // auto-unsubscribes when this component is destroyed → no leak
    interval(1000)
      .pipe(takeUntilDestroyed())
      .subscribe(v => (this.n = v));
  }
}

Join the discussion

Discussion (0)

No responses yet. Be the first to share what you think.

How do you dynamically create components?

What is the difference between useClass, useValue, useFactory, and useExisting?