1
resposta

Life Cycle Angular ngOnDestroy

Bom dia! Ainda tenho dúvidas de quando devo utilizar o onDestroy. Quando no decorator de um service é utilizado o (provideIn: 'root') é uma boa prática no componente que o utiliza realizar o unsubscribe?

1 resposta

Olá, Diogo! Tudo bem?

Desculpe a demora em retornar.

A sua dúvida é muito comum entre os desenvolvedores que trabalham com o Angular. O método ngOnDestroy é um dos métodos do ciclo de vida do Angular que é responsável por liberar recursos quando o componente é destruído.

Quando um componente é destruído, o Angular libera automaticamente todos os recursos associados a ele, como as subscrições dos observables, mas quando os recursos são criados fora do Angular, como em serviços, é preciso implementar manualmente a lógica de destruição desses recursos. Nesse caso, é recomendado que você implemente o método ngOnDestroy para fazer a limpeza desses recursos.

Um exemplo de utilização do ngOnDestroy seria para liberar recursos de uma subscrição que está sendo feita em um serviço. O código abaixo mostra como implementar o ngOnDestroy em um componente para fazer a limpeza de uma subscrição:

import { Component, OnDestroy } from '@angular/core';
import { Subscription } from 'rxjs';
import { MeuServico } from './meu-servico.service';

@Component({
  selector: 'meu-componente',
  template: '<p>Meu componente</p>',
})
export class MeuComponente implements OnDestroy {
  private subscription: Subscription;

  constructor(private meuServico: MeuServico) {
    this.subscription = this.meuServico.getObservable().subscribe();
  }

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

No código acima, o componente MeuComponente está se inscrevendo em um observable que é retornado pelo serviço MeuServico. No construtor do componente, é criada uma subscrição para esse observable e no método ngOnDestroy é realizada a desinscrição dessa subscrição para evitar vazamento de memória.

Quanto à sua pergunta sobre o uso do (provideIn: 'root'), essa prática indica que o serviço deve ser fornecido na raiz da aplicação, tornando-o disponível em todos os componentes da aplicação. Nesse caso, é importante tomar cuidado com as subscrições em componentes que utilizam esse serviço, pois elas podem estar ativas durante todo o ciclo de vida da aplicação, o que pode causar vazamento de memória.

Por isso, é uma boa prática fazer a limpeza das subscrições em componentes que utilizam serviços fornecidos na raiz da aplicação. Dessa forma, evita-se que as subscrições fiquem ativas indefinidamente e que ocorra vazamento de memória.

Em resumo, o uso do método ngOnDestroy é recomendado para liberar recursos criados manualmente fora do Angular e evitar vazamento de memória. E a limpeza de subscrições em componentes que utilizam serviços fornecidos na raiz da aplicação é uma boa prática para evitar que essas subscrições fiquem ativas indefinidamente.

Espero que tenha te ajudado!

Um abraço.