RxJS: Don’t Unsubscribe Anymore thanks to Rx-Scavenger, the RxJS Garbage Collector

Younes
Younes
May 30, 2018 · 2 min read
Image for post
Image for post
Rx-Scavenger — RxJS Garbage Collector

If you are an Angular or RxJS user, you are probably tired of handling subscriptions and being worrying about race conditions, memory leaks and CPU time.

You are probably used to one of the following common approaches :

  • Keep subscriptions in properties and unsubscribe manually (i.e. : in ngOnDestroy):
  • Angular’s async Pipe:
  • RxJS takeUntil operator :

Limitations

In some cases, the different approaches described above need a significant amount of boilerplate code and in other cases they can get tricky and error-prone.

For example, calling startCounting() method multiple times will create a race condition and will not produce the expected behavior.

Rx-Scavenger

The last alternative and my favorite one is Rx-Scavenger, the RxJS Subscription Garbage Collector.

First, you’ll have to install it using yarn add @wishtack/rx-scavenger (or npm install --save @wishtack/rx-scavenger ).

Then you can immediately start using in your Angular components like this:

The Scavenger is handed a reference to the component and thus it will automagically implement the ngOnDestroy method for you.

Using the Scavenger.collect() operator, the Scavenger will collect every subscription and unsubscribe it on ngOnDestroy or when asked for by calling Scavenger.unsubscribe() method.

Scavenger.collectByKey or the Killing Feature

We still have an issue here as calling startCounting() multiple times will trigger multiple subscriptions and it’s not the behavior we are looking for.

In order to fix this, we just have to replace this._scavenger.collect() by this._scavenger.collectByKey('count').

collectByKey will make sure that you never have more than one subscription at a time with the same key. So when we call startCounting() a second time, the Scavenger will unsubscribe the previous subscription when subscribing again.

Enjoy!

Younes

Written by

Younes

Google Developer Expert for Angular & Web Technologies | eXtreme Programming Coach | Tech Advisor

Marmicode

Marmicode

At Marmicode, we use our passion and experience in Web Development & eXtreme Programming to help you cook better apps, ship them fast and make you proud of your work. #javascript #python #angular #continuousdeployment

Younes

Written by

Younes

Google Developer Expert for Angular & Web Technologies | eXtreme Programming Coach | Tech Advisor

Marmicode

Marmicode

At Marmicode, we use our passion and experience in Web Development & eXtreme Programming to help you cook better apps, ship them fast and make you proud of your work. #javascript #python #angular #continuousdeployment

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store