Angular — 3 Ways to automatically unsubscribe
Hey Hey Folks, how are you doing?
In this article I want to talk about three nice ways you can automatically unsubscribe from your observables, which are more elegant than using the unsubscribe method.
Before we dive in: Why I should unsubscribe from my observables?
In a short answer: to avoid memory leaks.
#1 Async Pipe
The first approach you can use to automatically unsubscribe from observables is to use the Async Pipe in your templates. I extremely recommend that you try to use it whenever is possible. Why?
By using this pipe, the Angular framework will be responsible for automatically subscribe and unsubscribe from the observable, so you don’t have to do anything. Pretty good, isn’t it?
I already wrote about the Async Pipe in this article where I discuss two design patterns that you can use with HTTP requests. You can check it out here. :)
Bellow we have a use example of the Async Pipe in a template file. The driver$ variable is an observable which is automatically subscribed and unsubscribed by using this approach.
For the next 2 approaches we are going to use RxJS operators. If you don’t know what is RxJS or why should you use it, check out my other article here where I discuss some keys points about this library.
#2 takeUntil Operator
This approach is a very common one and I already used it myself a couple of times. I’m going to use the takeUntil operator to manage the subscribe and unsubscribe from my observable.
What this operator does?
Emit values until provided observable emits.
In other words, it receives a notifier, which is an observable, as an input and keeps emitting values into the stream until the notifier emits the first value.
So to use this pattern, you will need to create an observable, which I called unsub$, that I’m going to use to emit a value when my component is destroyed. By doing so, it will automatically unsubscribe from the observable on the method ngOnInit, avoiding memory leaks.
#3 take Operator
Finally, I’m going to talk about the take operator. This guy is perfect to use with HTTP requests. Why? Because usually with this type of requests, I’m only expecting to receive one value. So, if I’m not going to use a retryOnError function, for example, there is no need to keep listening to a HTTP request after it emitted a value or an error.
What take operator does?
Emit provided number of values before completing.
This operator expects a number as an input. This number will be the number of times that I want values to keep flowing into my stream of data. In case of HTTP requests, I’m only interested in the first value, so 1 is the number I’m going to use. And after one value is emitted, the observable completes and it automatically unsubscribes from the outer observable.
So that’s it. Above there are three nice ways to use reactive programming in your favor. Enjoy!! hahah
I based this article in a video from Loiane Groner where she explains these approaches in detail. You can watch it here. :)
nice coding!!
