Subscribing to observables in Angular - Performance & Optimization

Performance: Subscribing to observables

MEDIUM IMPACT

This affects interaction responsiveness and memory usage by controlling how data streams update the UI and how resources are managed.

Managing data streams in Angular components

Angular

private subscription = this.dataService.getData().subscribe(data => {
  this.items = data;
});

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

Unsubscribing frees resources and stops unnecessary UI updates after component is destroyed.

📈 Performance Gainprevents memory leaks and reduces INP by stopping unused event listeners

Managing data streams in Angular components

Angular

this.dataService.getData().subscribe(data => {
  this.items = data;
});

No unsubscription leads to memory leaks and continuous UI updates even after component destruction.

📉 Performance Costcauses memory leaks and increases INP due to unnecessary event handling

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Manual subscribe without unsubscribe	Multiple updates even after component destroyed	Multiple reflows due to repeated change detection	High paint cost from unnecessary UI updates	[X] Bad
Manual subscribe with unsubscribe in ngOnDestroy	Updates only while component alive	Single reflow per update cycle	Moderate paint cost	[!] OK
Using async pipe in template	Updates only when data changes and auto cleans up	Minimal reflows	Low paint cost	[OK] Good

Rendering Pipeline

Subscribing to observables triggers change detection which leads to style recalculation, layout, and paint. Unmanaged subscriptions cause repeated unnecessary updates.

→Change Detection

→Style Calculation

→Layout

→Paint

⚠️ BottleneckChange Detection due to frequent or unnecessary updates

Core Web Vital Affected

INP

This affects interaction responsiveness and memory usage by controlling how data streams update the UI and how resources are managed.

Optimization Tips

1Always unsubscribe from observables to prevent memory leaks.

2Use async pipe in templates to automate subscription management.

3Minimize the frequency of observable emissions to reduce change detection triggers.

Performance Quiz - 3 Questions

What is the main performance risk of subscribing to observables without unsubscribing in Angular?

A Memory leaks and slower input responsiveness

B Faster page load time

C Improved visual stability

D Reduced bundle size

DevTools: Performance

How to check: Record a session while interacting with the component, then look for frequent change detection cycles and long scripting times.

What to look for: Look for repeated change detection events and long scripting tasks indicating unnecessary subscriptions causing slow responsiveness.

Practice

1. What does subscribing to an observable in Angular allow you to do?

easy

A. React to data or events over time

B. Create new components automatically

C. Change the Angular version

D. Compile TypeScript to JavaScript

Solution

1. Step 1: Understand the purpose of observables

   Observables emit data or events over time, like a stream of values.

2. Step 2: Role of subscribing

   Subscribing lets you listen and react to these emitted values as they arrive.

3. Final Answer:

   React to data or events over time -> Option A

4. Quick Check:

   Subscribing = Reacting to data/events [OK]

Hint: Subscribing means listening to data changes over time [OK]

Common Mistakes:

• Thinking subscribing creates components
• Confusing subscribing with compilation
• Believing subscribing changes Angular version

2. Which is the correct syntax to subscribe to an observable named data$ in Angular?

easy

A. data$.subscribe(value => console.log(value));

B. data$.subscribe = value => console.log(value);

C. subscribe(data$ => console.log(data$));

D. data$.subscribe(console.log());

Solution

1. Step 1: Identify correct subscribe method usage

   The subscribe method is called on the observable with a callback function.

2. Step 2: Check syntax correctness

   data$.subscribe(value => console.log(value)); correctly calls data$.subscribe with an arrow function receiving the emitted value.

3. Final Answer:

   data$.subscribe(value => console.log(value)); -> Option A

4. Quick Check:

   Correct subscribe syntax = data$.subscribe(value => console.log(value)); [OK]

Hint: Use observable.subscribe(callback) to listen [OK]

Common Mistakes:

• Assigning subscribe instead of calling it
• Calling subscribe as a standalone function
• Calling console.log() prematurely

3. Given this code snippet:

const obs$ = of(1, 2, 3);
obs$.subscribe({
  next: x => console.log(x),
  error: err => console.error(err),
  complete: () => console.log('Done')
});

What will be the console output?

medium

A. Done 1 2 3

B. 1 2 3 Done

C. 1 2 3

D. Error

Solution

1. Step 1: Understand observable emissions

   The observable emits values 1, 2, 3 in sequence.

2. Step 2: Analyze subscription callbacks

   The next callback logs each value, then complete logs 'Done'.

3. Final Answer:

   1 2 3 Done -> Option B

4. Quick Check:

   Values then complete message = 1 2 3 Done [OK]

Hint: next logs values, complete logs 'Done' after all [OK]

Common Mistakes:

• Assuming complete logs before values
• Ignoring complete callback
• Expecting error without error emission

4. What is wrong with this subscription code?

this.data$.subscribe(data => {
  this.value = data;
});
// No unsubscribe called anywhere

medium

A. It will unsubscribe automatically

B. It will throw a syntax error

C. It will cause a memory leak if component is destroyed

D. It will not receive any data

Solution

1. Step 1: Identify subscription management

   The code subscribes but never unsubscribes, risking resource leaks.

2. Step 2: Understand Angular component lifecycle

   Without unsubscribing, the subscription stays active after component destruction, causing memory leaks.

3. Final Answer:

   It will cause a memory leak if component is destroyed -> Option C

4. Quick Check:

   Missing unsubscribe = memory leak risk [OK]

Hint: Always unsubscribe to avoid memory leaks [OK]

Common Mistakes:

• Assuming Angular unsubscribes automatically
• Thinking no data will be received
• Confusing syntax errors with runtime issues

5. You want to subscribe to two observables obs1$ and obs2$ and combine their latest values whenever either emits. Which RxJS operator should you use before subscribing?

hard

A. filter

B. map

C. catchError

D. combineLatest

Solution

1. Step 1: Understand the need to combine latest values

   You want to react to the latest values from both observables whenever either emits.

2. Step 2: Identify the correct RxJS operator

   combineLatest emits an array of latest values from all observables whenever any emits.

3. Final Answer:

   combineLatest -> Option D

4. Quick Check:

   Combine latest values = combineLatest operator [OK]

Hint: Use combineLatest to merge latest values from multiple observables [OK]

Common Mistakes:

• Using map which transforms but doesn't combine
• Using filter which only filters emissions
• Using catchError which handles errors, not combining