What Shoul I explicity unsubscribe on this component?

Question

I am starting to work with angular and the unsubscribe concept isn't very clear to me. What should I unsubscribe and what I don't need? I would like understand more what I need to unsubscribe on angular

My code in ngOnInit() call some methods in the body of my component

ngOnInit(): void {
    const user$ = this.authService.currentUser as Observable<Usuario>;
    const avaliacao$ = this.avaliacaoService
      .avaliacaoAtual$ as Observable<Avaliacao>;

    this.authService.currentUser.subscribe((usuario) => {
      this.usuario = usuario;
    });

    this.avaliacaoSubscription =
      this.avaliacaoService.avaliacaoAtual$.subscribe((avaliacao) => {
        this.avaliacaoSelecionada = avaliacao;
        console.log('avaliação selecionada ' + this.avaliacaoSelecionada.ano);
      });

    user$.pipe(withLatestFrom(avaliacao$)).subscribe(([usuario, avaliacao]) => {
      this.usuario = usuario;
      this.avaliacaoSelecionada = avaliacao;

      console.log('avaliação selecionada ' + this.avaliacaoSelecionada.ano);

      this.buscaParticipantesAvaliacaoPorIdAvaliacaoEMatServidor(
        this.avaliacaoSelecionada.id,
        this.usuario.servidor.matricula
      );
    });
  }


buscaParticipantesAvaliacaoPorIdAvaliacaoEMatServidor(
    idAvaliacao: string,
    matServidor: string
  ) {
    this.avaliacaoGestorService
      .buscaParticipantesAvaliacaoPorIdAvaliacaoEMatServidor(
        idAvaliacao,
        matServidor
      )
      .subscribe({
        next: (participanteAvaliacao) => {
          console.log('participanteAvaliacao: ' + participanteAvaliacao);
          this.participanteAvaliacao = participanteAvaliacao;
          this.gestorAtual = this.participanteAvaliacao.matGestor;
          console.log('participanteAvaliacao:', participanteAvaliacao);
          console.log(
            'participanteAvaliacao: ' + JSON.stringify(participanteAvaliacao)
          );
        },
        error: (error) => {
          this.gestorAtual = '-1';
          console.error(error);
        },
      });
  }

ngOnDestroy(): void {
    this.avaliacaoSubscription.unsubscribe();
  }

Answer 1

In Angular, you need to unsubscribe from observables to prevent memory leaks when a component is destroyed. Subscribing to an observable creates a reference between the observable and the subscriber (in this case, your component). If you don't unsubscribe, the observable might keep emitting data even after the component is destroyed, leading to unnecessary memory usage and potential bugs.

this.avaliacaoGestorSubscription = this.avaliacaoGestorService { ...code...};

 ngOnDestroy(): void {
      this.avaliacaoSubscription.unsubscribe();
      this.avaliacaoGestorService.unsubscribe();
}

Subscriptions that complete automatically (e.g., HTTP requests using HttpClient) do not require manual unsubscription. Angular's HttpClient automatically completes its observable when the HTTP request completes, so you don't need to worry about unsubscribing.