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.
Top comments (3)
Cool, first post I saw in Portuguese!
Excelente artigo, agora consegui ver como funciona o unsubscribe.
Bom artigo. Simples, direto e objetivo. Grato!