DEV Community

Discussion on: Angular : RxJS BehaviorSubject

View post
Collapse
 
stradivario profile image
Kristiqn Tachev • • Edited

Everything is awesome but there is one thing you should pay attention.

By subscribing inside ngOnInit you are introducing a memory leak since this hook will be triggered on component initialization.

For example going to page / and then /orders for example. Go back and forward a few times and print out console.log inside the subscription. You should get a multiple console log printing instead of one. This is because you are not unsubscribing from the observable.

One way to mitigate this issue is by letting html template to subscribe for you using async pipe

<div>{{ orderCount | async }}</div>
Enter fullscreen mode Exit fullscreen mode

Inside the ngOnInit you just need to define the observable

ngOnInit(){
  this.orderCount = this.orderService.getOrderCount();
}
Enter fullscreen mode Exit fullscreen mode

In some cases when you need to subscribe for example to router change event you don't need to subscribe inside the template so you can use a different approach

import { Subscription } from 'rxjs';
class MyComponent {
 subscription: Subscription;
 ngOnInit() {
  this.subscription = this.orderService.getOrderCount().subscribe();
 }

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

}
Enter fullscreen mode Exit fullscreen mode

Cheers!

Collapse
 
kforp profile image
George Koval. •

You maybe interested to unsubscribe using takeUntil instead of saving the subscription and manually unsubscribing (you can have multiple subscriptions and it's not that convenient to manually unsubscribe from all of them).

Collapse
 
ahelmi365 profile image
Ali Helmi •

Can you please post an article explaining how to use "TakeUntil" to unsubscribe all subscriptions?

Collapse
 
dipteekhd profile image
diptee •

Thanks for mentioning this point!
Yes it is necessary to unsubscribe Subject, BehaviorSubject subscriptions in ngOnDestroy() to avoid memory leaks & unexpected output.

Collapse
 
sekharkumar profile image
sekhar •

Fantastic blog

Collapse
 
ahelmi365 profile image
Ali Helmi •

Can you please post an article explaining how to use "TakeUntil" to unsubscribe all subscriptions?

Collapse
 
stradivario profile image
Kristiqn Tachev •

Here you go mate :)

import { Subscription } from 'rxjs';

class MyComponent {

 destroy$ = new Subject();

 ngOnInit() {
   this.orderService.getOrderCount().pipe(takeUntil(this.destroy$)).subscribe();
 }

 ngOnDestroy() {
  this.destroy$.complete();
 }
}
Enter fullscreen mode Exit fullscreen mode

Some comments have been hidden by the post's author - find out more