Observables: cancelar inscrição (unsubscribe) é importante!

Não se esqueça de cancelar o subscribe dos Observables!

Quando nos inscrevemos em um Observable, continuamos escutando-o, mesmo depois de abandonarmos o componente que o criou. Isso ocorre mais comumente quando criamos nossos próprios Observables e não nos providos pelo Angular, porém, até para esses é uma boa prática sempre nos desinscrevermos dos Observables no ngOnDestroy().

No exemplo deste post criei 2 links que navegarão entre dois componentes: com-observable e sem-observable.

No componente com-observable, estou usando a função interval do rxjs, que cria um Observable que incrementa e emite um número num intervalo de tempo determinado. Me inscrevi neste Observable e os números emitidos serão exibidos no console do stackblitz(na barra inferior, expanda-o), no componente sem-observable, apenas exibo um texto informando onde estamos.

Perceba que quando navegamos para o componente sem-observable, valores continuam sendo exibidos no console! Se voltamos para o componente com-observable, temos 2 observables emitindo resultados para o console! E novos observables serão acumulados a medida que saímos e entramos novamente no componente com-observable!

Podemos concluir que nossa aplicação pode emitir resultados inesperados, ficar muito lenta ou até mesmo quebrar por conta disso. Por esse motivo é fundamental criar uma variável para armazenar a inscrição e desinscrever-se no ngOnDestroy().

Agora, no componente com-observable, experimente remover o código comentado do ngOnDestroy() e experimente novamente navegar entre os componentes e veja que as inscrições não se acumulam mais!
Obs: talvez seja necessário atualizar o navegador do stackblitz.

Caso não consiga ver o embedded, clique aqui.