Unsubscribing and memory leaks in Angular - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is a memory leak in Angular applications?

A memory leak happens when the app keeps using memory for things it no longer needs, like leftover subscriptions. This can slow down or crash the app over time.

beginner

Why should you unsubscribe from Observables in Angular?

Unsubscribing stops the app from listening to data streams that are no longer needed. This frees memory and prevents memory leaks.

beginner

Name a common Angular lifecycle hook used to unsubscribe from Observables.

The ngOnDestroy lifecycle hook is used to clean up subscriptions before the component is destroyed.

intermediate

What is the purpose of the 'takeUntil' operator in Angular RxJS?

The 'takeUntil' operator automatically unsubscribes from an Observable when another Observable emits a value, often used with a 'destroy' notifier to clean up subscriptions.

intermediate

How can using the async pipe in Angular templates help prevent memory leaks?

The async pipe automatically subscribes and unsubscribes from Observables when the component loads and unloads, so you don't have to manage subscriptions manually.

What happens if you don't unsubscribe from an Observable in Angular?

A The Observable stops emitting data.

B The app will automatically unsubscribe for you.

C Memory leaks can occur because subscriptions stay active.

D Nothing, it's safe to ignore.

If you don't unsubscribe, the subscription stays active and can cause memory leaks.

Which Angular lifecycle hook is best for unsubscribing from Observables?

A ngAfterViewInit

B ngOnDestroy

C ngOnInit

D ngDoCheck

ngOnDestroy is called just before the component is removed, making it ideal for cleanup like unsubscribing.

What does the 'takeUntil' operator do in RxJS?

A Unsubscribes when another Observable emits

B Converts Observable to Promise

C Delays the Observable emissions

D Starts a new Observable

'takeUntil' unsubscribes from the source Observable when the notifier Observable emits.

How does the async pipe help with memory management?

A It automatically unsubscribes when the component is destroyed

B It caches data permanently

C It prevents Observables from emitting

D It delays subscription until user clicks

The async pipe handles subscription and unsubscription automatically, preventing leaks.

Which of these is NOT a good practice to avoid memory leaks in Angular?

A Unsubscribe manually in ngOnDestroy

B Use takeUntil with a destroy notifier

C Use async pipe in templates

D Keep subscriptions active forever

Keeping subscriptions active forever causes memory leaks and should be avoided.

Explain why unsubscribing from Observables is important in Angular and how you can do it.

Think about what happens when components are removed and how to clean up.

Describe three methods to prevent memory leaks caused by subscriptions in Angular.

Consider lifecycle hooks, template tools, and RxJS operators.

Practice

1. Why is it important to unsubscribe from Observables in Angular components?

easy

A. To make the component load faster initially.

B. To prevent memory leaks by stopping ongoing subscriptions when the component is destroyed.

C. To increase the number of active subscriptions.

D. To automatically refresh the component view.

Solution

1. Step 1: Understand Observable subscriptions

   Subscriptions keep listening to data streams, even if the component is gone.

2. Step 2: Recognize the effect of not unsubscribing

   Not unsubscribing causes memory to be used unnecessarily, leading to leaks.

3. Final Answer:

   To prevent memory leaks by stopping ongoing subscriptions when the component is destroyed. -> Option B

4. Quick Check:

   Unsubscribe to avoid memory leaks = B [OK]

Hint: Unsubscribe in ngOnDestroy to avoid leaks [OK]

Common Mistakes:

• Thinking Angular unsubscribes automatically
• Believing unsubscribing improves load speed
• Ignoring memory leaks from active subscriptions

2. Which of the following is the correct way to unsubscribe from a subscription in Angular's ngOnDestroy method?

easy

A. this.subscription.unsubscribe();

B. this.subscription.stop();

C. this.subscription.close();

D. this.subscription.cancel();

Solution

1. Step 1: Recall Subscription API

   The Subscription object has an unsubscribe() method to stop listening.

2. Step 2: Identify correct method name

   Only unsubscribe() is valid; others do not exist on Subscription.

3. Final Answer:

   this.subscription.unsubscribe(); -> Option A

4. Quick Check:

   Use unsubscribe() to stop subscription = D [OK]

Hint: Use unsubscribe() method to stop subscriptions [OK]

Common Mistakes:

• Using non-existent methods like stop() or cancel()
• Forgetting to call unsubscribe() at all
• Calling unsubscribe() outside ngOnDestroy

3. Consider this Angular component snippet:

export class MyComponent implements OnDestroy {
  private sub = this.service.getData().subscribe(data => console.log(data));

  ngOnDestroy() {
    // missing unsubscribe
  }
}

What will happen if this component is created and destroyed multiple times without adding unsubscribe in ngOnDestroy?

medium

A. Memory usage will increase over time due to active subscriptions not being cleaned up.

B. The component will automatically unsubscribe, so no issues occur.

C. The subscription will throw an error immediately on component destroy.

D. The component will reload data only once and then stop.

Solution

1. Step 1: Analyze missing unsubscribe

   Without calling unsubscribe, the subscription stays active even after component destruction.

2. Step 2: Understand consequences

   Repeated creation and destruction cause multiple active subscriptions, increasing memory use.

3. Final Answer:

   Memory usage will increase over time due to active subscriptions not being cleaned up. -> Option A

4. Quick Check:

   Missing unsubscribe causes memory leaks = A [OK]

Hint: No unsubscribe means memory leaks grow with component reuse [OK]

Common Mistakes:

• Assuming Angular auto-unsubscribes
• Expecting errors on destroy without unsubscribe
• Thinking subscription stops automatically

4. Identify the problem in this Angular component code related to unsubscribing:

export class DemoComponent implements OnDestroy {
  private subscription: Subscription;

  ngOnInit() {
    this.subscription = this.service.getData().subscribe();
  }

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

medium

A. The subscription is unsubscribed twice.

B. Subscription is declared but never assigned.

C. ngOnDestroy is missing the unsubscribe call.

D. The unsubscribe method is not called; it is referenced without parentheses.

Solution

1. Step 1: Check unsubscribe usage

   The code uses this.subscription.unsubscribe; without parentheses, so the method is not executed.

2. Step 2: Understand effect

   Without calling unsubscribe(), the subscription remains active, causing memory leaks.

3. Final Answer:

   The unsubscribe method is not called; it is referenced without parentheses. -> Option D

4. Quick Check:

   Call unsubscribe() with () to execute it = A [OK]

Hint: Always call unsubscribe() with parentheses [OK]

Common Mistakes:

• Forgetting parentheses on unsubscribe
• Assuming referencing method unsubscribes
• Not assigning subscription before unsubscribe

5. You have multiple subscriptions in an Angular component. Which is the best way to manage unsubscribing all of them efficiently?

hard

A. Ignore unsubscribing because Angular handles it automatically.

B. Manually call unsubscribe() on each subscription separately in ngOnDestroy.

C. Store all subscriptions in a Subscription object and call unsubscribe() once in ngOnDestroy.

D. Use setTimeout to delay unsubscribing after component destruction.

Solution

1. Step 1: Understand managing multiple subscriptions

   Using a Subscription object lets you add multiple subscriptions and unsubscribe all at once.

2. Step 2: Compare with manual unsubscribing

   Manual unsubscribing is error-prone and verbose; Subscription.add() simplifies cleanup.

3. Final Answer:

   Store all subscriptions in a Subscription object and call unsubscribe() once in ngOnDestroy. -> Option C

4. Quick Check:

   Use Subscription.add() and one unsubscribe() call = C [OK]

Hint: Use Subscription.add() to group and unsubscribe once [OK]

Common Mistakes:

• Forgetting to unsubscribe all subscriptions
• Relying on Angular to auto-unsubscribe
• Using setTimeout which delays cleanup unnecessarily