Use takeUntil instead of manually unsubscribing from Observables

[00:01] It's nice in RxJS that once you call unsubscribe, those resources such as event listeners attached will be disposed.

[00:09] On the other hand, what's not nice is to keep track of these subscriptions. What if you have a dozen of these different subscriptions, and then you need to handle the calls to unsubscribe for each one of those?

[00:20] It turns out that there are ways you can replace the manual unsubscribe with something smarter and more automatic. In our case, we want to dispose after four seconds. It turns out that we can represent this event of four seconds as an observable as well.

[00:35] We can write here four stream as an observable of interval four seconds. That means that this will emit every four seconds, but we're going to take just one of those values.

[00:49] It will emit after four seconds and then complete. We can make another observable here called clickUntil four stream. This will be basically the click stream, but we're going to use the takeUntil operator, and the argument here is four.

[01:05] What it does this do is that it basically behaves the same as click stream, except it will complete when a four emits something. Just to make a quick marble diagram of what is going on there, if we have here click stream and four stream here and then clickUntil four stream will be this.

[01:27] If we have our clicks happening here overtime as such, and then we have this we know that will emit a value after four seconds. Let's imagine that four seconds is somewhere over here, and then it's going to complete after that, because we just take one of those events.

[01:45] ClickUntil four will be basically behaving like the click stream like this, except it will complete whenever this one emits, like that. The trick here is that whenever an observable completes, it will automatically unsubscribe from its resources. That's what allows us to be able to remove this part essentially. Instead of subscribing to the click stream, we're going to subscribe to clickUntil four.

[02:19] We can try this out here in the console. I'm going to click for a while. After four seconds, it will not take my clicks anymore, as such. The trick here is really just to make observables complete somehow. TakeUntil is one of those operators that allows you to complete.

[02:40] It's not the only operator that does that. We also have, for instance, here takeOperator that takes in number. Here as an argument, we're going to pass six there. Now, we can call this six clicks. We don't need this four observable anymore.

[02:58] The logic here will be a bit different because we're doing something different. Instead of completing the click observable after four seconds, we're completing it after we have seen six clicks, like this. When it completes, it will also dispose the resources such as the event listener.

[03:18] Let's try this out as well. One, two, three, four, five, six, and it no longer takes my clicks.

[03:26] The lesson here is just, whenever you see a subscription, like for instance, if we would keep this subscription, and if you think that you need to unsubscribe it, then first ask yourself, "Can you make this one complete instead of using the unsubscribe?" Because then, you're going to have something that is more automatic and you don't need to worry about those un-subscription moments.