RxJS Subscription – represents a disposable resource

RxJS Subscription is an object that represents an execution of Observable. A Subscription is used to unsubscribe the observer attached to an Observable. In the last part of the previous article, you have learned about Unsubscribing Observable Executions. But technically it is unsubscribe() of a Subscription. You will learn about Subscriptions in-depth in this article.

NOTE: In the older version of RxJS, Subscription was also known as Disposable.

Unsubscribing Observable execution

Subscription is important to unsubscribe() the assigned observer from Observable. This unsubscribe()releases resources and cancels the Observable$ execution.

Below is a simple code which demonstrates unsubscribe(). You can also run it on stackblitz.

import { Observable } from "rxjs";

const observable$ = new Observable(subscriber => {
  setInterval(() => {
    subscriber.next(Math.random());
  }, 500);
});

const subscription = observable$.subscribe(value => {
  console.log("Inside observer1: " + value);
});

setTimeout(() => {
  subscription.unsubscribe();
}, 10000);

As you guessed, in the above code observable produces a random fraction number in every 500ms. After 10 seconds the subscription.unsubscribe(); which terminates the execution of the observable assigned to subscription scope.

Combining multiple subscriptions

You can also combine multiple subscriptions together and unsubscribe() on the parent-subscription to cancel all the executions. This will be much clear from the below example. Try it out on Stackblitz.com.

import { Observable } from "rxjs";

const observable$ = new Observable(subscriber => {
  setInterval(() => {
    subscriber.next(Math.random());
  }, 500);
});

const subscription = observable$.subscribe(value => {
  console.log("Inside observer1: " + value);
});

const childSubscription = observable$.subscribe(data => {
  console.log("Inside observer2: "+ data);
});

subscription.add(childSubscription);//combine

setTimeout(() => {
  subscription.unsubscribe();
}, 10000);
/** Combine Subscriptions */

As you can see in the code subscription.add(childSubscription) is used to combine the subscriptions. All the executions are cleared at once and also the allocated resources.

Remove a child subscription

Subscriptions have 2 methods, as add(anotherSubscription) and remove(anotherSubscription). I have talked about the add method in the above example, remove is just the opposite of add. If you have a child-subscription combined to a parent, you can separate them by using the remove method.

Below code demonstrates the use of remove method.

import { Observable } from "rxjs";

const observable$ = new Observable(subscriber => {
  setInterval(() => {
    subscriber.next(Math.random());
  }, 500);
});

const subscription = observable$.subscribe(value => {
  console.log("Inside observer1: " + value);
});

const childSubscription = observable$.subscribe(data => {
  console.log("Inside observer2: "+ data);
});

subscription.add(childSubscription);//combine

subscription.remove(childSubscription); //remove for some reason

setTimeout(() => {
  subscription.unsubscribe();
}, 10000);

API details of Subscription class

Check the complete source code on GitHub. As you can see, the Subscription class has the followings:

• closed – property – A flag that indicates whether the Subscription is already unsubscribed.
• unsubscribe() – method – Disposes the resources held by subscription.
• add() – method – Adds a teardown or child subscription to be called during the unsubscribe().
• remove() – method – Removes a child-subscription from the internal list of subscriptions that will be unsubscribed.

class Subscription implements SubscriptionLike {
  static EMPTY: Subscription
  constructor(unsubscribe?: () => void)
  closed: [object Object]
  unsubscribe(): void
  add(teardown: TeardownLogic): Subscription
  remove(subscription: Subscription): void
}

I explained you the function and usage of unsubscribe(), add() and remove() in the above sections. Now I will show you an example of using closed property.

Subscription closed example

Below is the code example that demonstrates the use of subscription.closed. This is a simple example, in real-world you may have more complex use cases. Run the example on Stackblitz.com

import { Observable } from "rxjs";

const observable$ = new Observable(subscriber => {
  setInterval(() => {
    subscriber.next(Math.random());
  }, 500);
});
console.clear();

const subscription = observable$.subscribe(value => {
  console.log("Inside observer1: " + value);
});

setTimeout(() => {
  subscription.unsubscribe();
}, 10000);

//check if subscription is closed in every 5seconds
function checkIfClosed() {
  const check = setTimeout(() => {
    checkIfClosed();
  }, 5000);

  if (subscription.closed) {
    console.log("Subscription is closed");
    clearTimeout(check);
  } else {
    console.log("Subscription is not closed yet");
  }
}

checkIfClosed();

This is all as part of the RxJS Subscription. Please share your feedback in the comments below.