Boas práticas para unsubscribe

Unsubscribe é um tema importante que deve ser pensando quando são desenvolvidas aplicações grandes e escaláveis. Sua utilização é abrangente em projetos Angular e existe diversas abordagens para lidar com os Observables abaixo está listada as mais populares e consolidadas pela comunidade.

Alguns autores [7][8] advogam que não é necessário desligar Observables criados pelo HttpClient dado que esta tarefa é feita automaticamente pelo Angular, entretanto não é explicado "como" e não possuem referências oficiais.

Até a data da confecção deste material não há um posicionamento oficial do time do Angular sobre o assunto e considerando que desligar Observables não compromete a estabilidade ou a performance de aplicações Angular o que predomina é a boa prática do rxjs de desligar os Observables.

Desligando Observables com `first`

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { first } from 'rxjs/operators';

@Component({
  selector: 'app-first',
  template: '<section><h1>First</h1><div>{{ users | json }}</div></section>'
})
export class FirstComponent implements OnInit {
  constructor(private http: HttpClient) { }
  public users: any;

  getUsers(): Observable<any> {
    return this.http.get('/users');
  }

  ngOnInit() {
    this.getUsers().pipe(first()).subscribe(users => this.users = users);
  }

}

Desligando Observables com `takeWhile`

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { takeWhile } from 'rxjs/operators';

@Component({
  selector: 'app-takewhile',
  template: '<section><h1>takeUntil</h1><div>{{ users | json }}</div></section>'
})
export class TakewhileComponent implements OnInit {
  constructor(private http: HttpClient) { }
  public users: any;
  private alive = true;

  getUsers(): Observable<any> {
    return this.http.get('/users');
  }

  ngOnInit() {
    const predicate = () => this.alive;
    this.getUsers().pipe(takeWhile(predicate)).subscribe(users => this.users = users);
  }

  ngOnDestroy() {
    this.alive = false;
  }

}

Desligando Observables com `takeUntil`

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable, Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';

@Component({
  selector: 'app-takeuntil',
  template: '<section><h1>takeUntil</h1><div>{{ users | json }}</div></section>'
})
export class TakeuntilComponent implements OnInit {
  constructor(private http: HttpClient) { }
  public users: any;
  private unsubscribe = new Subject();

  getUsers(): Observable<any> {
    return this.http.get('/users');
  }

  ngOnInit() {
    this.getUsers().pipe(takeUntil(this.unsubscribe)).subscribe(users => this.users = users);
  }

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

}

Desligando Observables com `unsubscribe`

import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

@Component({
  selector: 'app-unsubscribe',
  template: '<section><h1>unsubscribe</h1><div>{{ users | json }}</div><div>{{ products | json }}</div></section>'
})
export class UnsubscribeComponent {
  constructor(private http: HttpClient) { }
  public users: any;
  public products: any;
  private subscriptions = [];

  getUsers(): Observable<any> {
    return this.http.get('/users');
  }

  getProducts(): Observable<any> {
    return this.http.get('/products');
  }

  ngOnInit() {
    const usersSubscription = this.getUsers().subscribe(users => this.users = users);
    const productsSubscription = this.getProducts().subscribe(products => this.products = products);

    this.subscriptions.push(usersSubscription, productsSubscription);
  }

  ngOnDestroy() {
    this.subscriptions.forEach(sub => sub.unsubscribe());
  }

}