Is unsubscribing from ActivatedRoute (for example, params) observables necessary?

Question

Is unsubscribing from ActivatedRoute (for example, params) observables necessary?

I have come across numerous instances where Observables related to ActivatedRoute such as params or url are subscribed to but not unsubscribed.

constructor(private route: ActivatedRoute) {}

ngOnInit() {
  this.route.params
    // (+) converts string 'id' to a number
    .switchMap((params: Params) => this.service.getHero(+params['id']))
    .subscribe((hero: Hero) => this.hero = hero);
}

Do the route objects and subscriptions get destroyed automatically and recreated for every component creation?
Is it necessary to manually unsubscribe from those Observables?
If not, can you explain what happens with the tree of ActivatedRoute objects in Router.routerState?

angular typescript angular2-router3 angular2-router

Answer 1

Answer №1

Not always required

Referencing the documentation:

While it's common practice to unsubscribe from observables in a component when it is destroyed, there are some exceptions where this step may not be necessary. One such exception is with the ActivatedRoute observables.

The ActivatedRoute and its observables operate independently of the Router. When a routed component is no longer needed, the Router destroys it along with the injected ActivatedRoute.

It's still recommended to unsubscribe from these observables as a precautionary measure. It doesn't hurt and can never be considered a bad habit.

Answer 2

Not always required

Referencing the documentation:

While it's common practice to unsubscribe from observables in a component when it is destroyed, there are some exceptions where this step may not be necessary. One such exception is with the ActivatedRoute observables.

The ActivatedRoute and its observables operate independently of the Router. When a routed component is no longer needed, the Router destroys it along with the injected ActivatedRoute.

It's still recommended to unsubscribe from these observables as a precautionary measure. It doesn't hurt and can never be considered a bad habit.

Answer 3

Answer №2

When discussing the benefits of managing subscriptions to ActivatedRoute, Angular takes care of unsubscribing automatically.

It's mentioned that when a routed component is no longer necessary, the Router will destroy it along with the injected ActivatedRoute.

If you're curious about how to properly unsubscribe from Observables:

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


@Component({
  selector: 'app-example',
  templateUrl: './example.component.html',
  styleUrls: ['./example.component.scss']
})
export class ExampleComponent implements OnInit, OnDestroy {
  paramsSubscription : Subscription;

  constructor(private activatedRoute : ActivatedRoute) { }

  /* Angular lifecycle hooks
  */
  ngOnInit() {
    console.log("Component initialized");
    this.paramsSubscription = this.activatedRoute.params.subscribe( params => {

    });
  }

  ngOnDestroy() {
    console.log("Component will be destroyed");
    this.paramsSubscription.unsubscribe();
  }

}

Answer 4

When discussing the benefits of managing subscriptions to ActivatedRoute, Angular takes care of unsubscribing automatically.

It's mentioned that when a routed component is no longer necessary, the Router will destroy it along with the injected ActivatedRoute.

If you're curious about how to properly unsubscribe from Observables:

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


@Component({
  selector: 'app-example',
  templateUrl: './example.component.html',
  styleUrls: ['./example.component.scss']
})
export class ExampleComponent implements OnInit, OnDestroy {
  paramsSubscription : Subscription;

  constructor(private activatedRoute : ActivatedRoute) { }

  /* Angular lifecycle hooks
  */
  ngOnInit() {
    console.log("Component initialized");
    this.paramsSubscription = this.activatedRoute.params.subscribe( params => {

    });
  }

  ngOnDestroy() {
    console.log("Component will be destroyed");
    this.paramsSubscription.unsubscribe();
  }

}

Answer 5

Answer №3

Once the router navigates to a new route, the component will be destroyed and the routerState will no longer hold a reference to it, allowing for garbage collection including the observable.

If you share references of this component with other components or services, the component will not be eligible for garbage collection and the subscription will remain active. However, I believe (without confirmation) that the router will complete the observable when navigating away, triggering the cancellation of the subscription.

Answer 6

Once the router navigates to a new route, the component will be destroyed and the routerState will no longer hold a reference to it, allowing for garbage collection including the observable.

If you share references of this component with other components or services, the component will not be eligible for garbage collection and the subscription will remain active. However, I believe (without confirmation) that the router will complete the observable when navigating away, triggering the cancellation of the subscription.

Answer 7

Answer №4

When incorporating a subscribe function into a component, it is essential to remember to unsubscribe when the component is being destroyed. However, subscribing to Activated route params does not necessitate an unsubscribe action, as the router automatically handles the subscription's destruction when it is no longer required.

Answer 8

When incorporating a subscribe function into a component, it is essential to remember to unsubscribe when the component is being destroyed. However, subscribing to Activated route params does not necessitate an unsubscribe action, as the router automatically handles the subscription's destruction when it is no longer required.

Answer 9

Answer №5

When working with HTTP observables calls and router observables, there is no need to manually unsubscribe. However, for other types of observables or custom ones, it is important to remember to unsubscribe in the ngOnDestroy() method. This can be done by calling the unsubscribe() method within the Subscription object where the observable is stored in the component.

Answer 10

When working with HTTP observables calls and router observables, there is no need to manually unsubscribe. However, for other types of observables or custom ones, it is important to remember to unsubscribe in the ngOnDestroy() method. This can be done by calling the unsubscribe() method within the Subscription object where the observable is stored in the component.

Is unsubscribing from ActivatedRoute (for example, params) observables necessary?

Answer №1

Not always required

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

Taking ASP.NET Core 2.0 with Angular to CloudFoundry

I'm wondering why my JWT token appears as null on the backend while it is not null on the frontend

What about incorporating unique images with custom HTML input tags?

Angular's Motion Module

WebSocket establishing fresh connection every passing moment

After a screen refresh in Angular 5, ActivatedRoute.queryParams becomes null

"Learn how to dynamically change the color of a button in Angular after it has been clicked

Invoke an ActionCreator within a different ActionCreator

Enhancing HTML element appearance in TypeScript and Angular: A guide to adding style

What steps can be taken to resolve the TS2322 error that occurs while attempting to assign data[prop] to this

connect a column from a separate array in pdfmake

In Angular 11, there is a potential for an object to be null

The offsetTop property of Angular's nativeElement always returns a value of 0

Unlocking Column Data Tooltips in Angular Datatables: A Step-by-Step Guide

Is it possible for an app's feature module to access routing configurations from another lazily loaded module in Angular routing?

Dynamic Angular TreeView showcasing nested children branches

What could be the reason for an empty FormData map being fetched when testing a fetch call in React?

Connect a function to a functional component within React

What strategies can I use to address the problem of 'unable to resolve import in '@/...'" in vitest?

Attempt the initial request using the HttpInterceptorFn feature in Angular 17 (Functional HTTP Interceptor)