Desvendando o unsubscribe no Angular com RxJS

Neste artigo você aprenderá sobre o unsubscribe no Angular, utilizando também o RxJS, recurso importante para aplicações

Fala programador(a), beleza? Bora aprender mais sobre Angular!

No mundo do desenvolvimento Angular, um dos tópicos mais discutidos é a gestão de subscrições e, mais especificamente, quando e por que devemos desinscrever-nos de uma subscrição feita com o RxJS.

Neste artigo, vamos explorar o essencial sobre quando devemos cancelar a subscrição, com ênfase nas melhores práticas e abordagens recomendadas.

O que é uma subscrição no RxJS?

Antes de mergulhar na discussão principal, é essencial compreender o que é uma subscrição.

No contexto do RxJS, uma subscrição é, essencialmente, o processo de escuta de valores emitidos por um Observable.

Sempre que um Observable emite um valor, a função que você forneceu ao se inscrever é executada com esse valor.

Por que cancelar a subscrição?

Quando nos inscrevemos em um Observable, criamos uma ligação ativa que escuta mudanças ou emissões.

Se não desinscrevermos de Observables que não completam (como os que representam eventos do DOM ou chamadas de API que podem ocorrer múltiplas vezes), podemos criar vazamentos de memória em nossa aplicação.

Quando cancelar a subscrição?

A regra geral é: sempre que um componente for destruído e ele tiver subscrições ativas que não se auto completam, essas subscrições devem ser canceladas.

Não cancelar a subscrição pode resultar em vazamentos de memória, já que o componente não pode ser coletado pelo coletor de lixo enquanto houver referências ativas a ele, como uma subscrição.

Abordagens para cancelar a subscrição

Existem várias maneiras de gerenciar o cancelamento da subscrição em Angular:

1. Usando o método unsubscribe

A abordagem mais direta é usar o método unsubscribe fornecido pelo objeto Subscription:

import { Component, OnInit, OnDestroy } from '@angular/core';
import { Subscription } from 'rxjs';

@Component({
  selector: 'meu-componente',
  template: '<div></div>'
})
export class MeuComponente implements OnInit, OnDestroy {

  minhaSubscricao: Subscription;

  ngOnInit() {
    this.minhaSubscricao = /* Alguma subscrição */;
  }

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

2. Usando operadores RxJS

Outra maneira é usar operadores RxJS como takeUntil. Este operador permite que você especifique um Observable que, uma vez emitido, fará com que a subscrição original seja cancelada.

import { Component, OnInit, OnDestroy } from '@angular/core';
import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';

@Component({
  selector: 'meu-componente',
  template: '<div></div>'
})
export class MeuComponente implements OnInit, OnDestroy {

  destruir$ = new Subject<void>();

  ngOnInit() {
    /* Alguma subscrição */
    .pipe(takeUntil(this.destruir$))
    .subscribe(/* Função de callback */);
  }

  ngOnDestroy() {
    this.destruir$.next();
    this.destruir$.complete();
  }
}

Quer aprender mais sobre programação? Conheça nosso canal no YouTube:

Conclusão

Neste artigo você aprendeu sobre o unsubscribe no Angular com RxJS

A gestão correta das subscrições em Angular é fundamental para garantir a eficiência da aplicação e evitar vazamentos de memória.

Embora existam várias abordagens para gerenciar o cancelamento da subscrição, a chave é entender as nuances de cada uma e aplicar a que melhor se adapta ao seu caso de uso.

Independentemente da abordagem escolhida, o importante é ser consistente e sempre estar atento às possíveis armadilhas.

Está buscando evoluir como Programador? Confira o nossos cursos de programação.