Need to unsubscribe Firestore/Angularfire2 subscription

Question

I use Firestore like so.

Use case 1:

contacts$: Observable<ContactDetail[]>;

constructor(){    
} 

ionViewDidEnter() {
   this.contacts$ = this.contactProvider.getSpecificUserContacts(this.authenticationProvider.user.uid).valueChanges();
   this.contacts$.pipe(first()).subscribe(res => { },
      err => { },
      () => { }
   );
}

Use case 2:

getAllContactCategories() {
    this.categories$ = this.categoryProvider.getAllContactCategories().valueChanges();
    this.categories$.subscribe(res => {
       this.categorySortedList = res;          
    },
      err => { }
    );
}

But I have never unsubscribed it. So do I need to do that? Otherwise, will it lead to memory leaks and draining the battery usage? I know we don't need to unsubscribed angular HTTP services since it does automatically by the framework itself. So what about Firestore/Angularfire2 observables? I have never seen such a pattern with firestore books or articles or like so.

`first()` automatically unsubscribes after receiving the first value.. — Jeffrey Roosendaal, Sep 03 '18 at 10:13
Okay, Good to know about it. What about **use case 2**? @JeffreyRoosendaal — Sampath, Sep 03 '18 at 10:21
I don't know anything about firestore, just wanted to point out about `first()`. Same goes for pipes like `take(N)` and `takeUntil(X). — Jeffrey Roosendaal, Sep 03 '18 at 10:24
For unsubscribing in general, take a look at [this post](https://stackoverflow.com/questions/38008334/angular-rxjs-when-should-i-unsubscribe-from-subscription?rq=1). It has a great 'official' solution for Angular in the checkmarked answer (the `takeUntil()` method) — Jeffrey Roosendaal, Sep 03 '18 at 10:28

score 5 · Accepted Answer · edited Sep 05 '18 at 10:03

5

Yes, It's good to unsubscribe the subscribed one. You can try this...

  contactsSub: Subscription;

constructor(){
}

ionViewDidEnter() { ... }

  ionViewDidLeave{
  this.contactsSub.unsubscribe();
  }

From angularfire2 rep: https://github.com/angular/angularfire2/issues/377

edited Sep 05 '18 at 10:03

Sampath

63,341
64
307
441

answered Sep 03 '18 at 10:37

Sonali more

276
1
4

2

Yes, it is good for any custom event's subscription. My specific question here is `Firestore/Angularfire2`. Any reference to it using this pattern? – Sampath Sep 03 '18 at 10:39

Matthew Mullin · Answer 2 · 2018-09-03T12:46:53.563

3

By using the first() operator you are automatically unsubscribing directly after the the subscription is initially triggered. But to answer your specific question.

When subscribing to an observable in a component, you almost always arrange to unsubscribe when the component is destroyed. There are a few exceptional observables where this is not necessary. The ActivatedRoute observables are among the exceptions. The ActivatedRoute and its observables are insulated from the Router itself. The Router destroys a routed component when it is no longer needed and the injected ActivatedRoute dies with it.

Feel free to unsubscribe anyway. It is harmless and never a bad practice.

From https://angular.io/guide/route

In general if you wish to control when to unsubscribe, you can assign the observable to a variable

const subscription = this.subscription$.valueChanges().subscribe(...);

And then call unsubscribe on the newly created variable.

subscription.unsubscribe();

edited Sep 03 '18 at 12:46

answered Sep 03 '18 at 10:23

Matthew Mullin

7,116
4
21
35

I know about this pattern on custom subscription events. But with firestore/anglurafire2 how to handle that? Did you see any doc or something like that as a reference? – Sampath Sep 03 '18 at 10:36
@Sampath Angularfire use RxJS observables. Heres a link to the official docs http://reactivex.io/rxjs/class/es6/Subscription.js~Subscription.html#instance-constructor-constructor – Matthew Mullin Sep 03 '18 at 10:38
Yes, Angular `HTTP` service also uses `RxJS`. But we don't need to do it manually there. Why here we need it? I would like to see an official doc or article about it. I was not able to find out yet. – Sampath Sep 03 '18 at 10:43
Ahhh. Some inbuillt angular observables can controll their lifecycles so they will automatically unsubscribe when the components onDestoy is called. Off the top of my head these include the HTTPClient, Router, and a few others. In general if its not part of the @angular sdk you should manually be unsubscribing. Ill see if i can find some resources to back me up. – Matthew Mullin Sep 03 '18 at 10:47
@Sampath Done some digging and I cant seem to find a full list of what automatically handles unsubscribing, but you'll find an excerpt from the official docs in my updated answer . Hope this helps – Matthew Mullin Sep 03 '18 at 12:48

Need to unsubscribe Firestore/Angularfire2 subscription

2 Answers2