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 é larga em projetos Angular e existe diversas abordagens para lidar com os Observables abaixo está listada as mais populares e consolidadas pela comunidade.

Nota 1: 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 referencias oficiais e até a data da confecção deste material não há um posicionamento oficial do time do Angular sobre o assunto.

Nota 2 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 { first } from 'rxjs/operators';
// ...
export class MyComponent {
    ngOnInit() {
        this.service.method().pipe(first()).subscribe(props => this.props = props);
    }
}
// ...

Desligando Observables com `takeWhile`

// ...
import { takeWhile } from 'rxjs/operators';
// ...
export class MyComponent {
    private alive = true;

    ngOnInit() {
        const predicate = () => this.alive;
        this.service.method().pipe(takeWhile(predicate)).subscribe(props => this.props = props);
    }

    ngOnDestroy() {
        this.alive = false;
    }
}
// ...

Desligando Observables com `takeUntil`

// ...
import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';
// ...
export class MyComponent {
    private unsubscribe = new Subject();

    ngOnInit() {
        this.service.method().pipe(takeUntil(unsubscribe)).subscribe(props => this.props = props);
    }

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

Desligando Observables com `unsubscribe`

// ...
export class MyComponent {
    private subscriptions = [];

    ngOnInit() {
        const sub1 = this.service.method1().subscribe(props => this.props = props);
        const sub2 = this.service.method2().subscribe(props => this.props = props);

        this.subscriptions.push(sub1, sub2);
    }

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