RxJS: takeUntil Explained

Posted by Tomasz Smykowski on

RxJS stands for Reactive Extensions for JavaScript. It is a great library to handle flow of items received by your application. Today you will learn what is one of the most commonly used RxJS operator: takeUntil.

The documentation offers a diagram showing how takeUntil works:

But what does it really mean?

The analogy

Imagine that you found a good place to collect herbs to prepare a healing potion for your team, when a team leader comes over and tells you have to prepare for the journey.

You stop collecting herbs, and this is exactly how takeUntil operator works. It looks like this:

Balls represent items coming to a filter operator. A takeUntil operator emits incoming items on default. However, you can ignore all following items and complete output. At any given time.

How to translate this analogy to programming? Why an app should ignore items at any moment?

The example

RxJS takeUntil is useful when you want to ignore following items. You could do it with a switch variable. However, takeUntil does everything for you. All you have to do is to emit an item with a separate Observable called notifier. It will cause all items from input to be ignored from now on.

Let's say you wrote an app that allows the user to train a neural network that recognize user voice. The User has to tell five sentences to accomplish it. Then voice records are sent to a service that takes care of artificial intelligence training. However, the process takes forty minutes. Therefore, you want to show progress to the user. You connect to a WebSockets service that returns real-time progress to show to the user.

Eventually your main request finishes. But you are still listening for WebSockets messages. You notice websocket still sends messages after main request was finished causing UI glitches.

To stop listening for websocket updates, you decide to use takeUntil, and ignore status updates that are sent after the main request finishes.

The logic you want to introduce looks like this:

When a training process finishes:

- ignore websocket messages

The formal way to write it down with RxJS like this:

aiTrainingProgressUpdate
   .pipe(
      takeUntil(onAiTrainingProgressFinish);
   )
   .subscribe(
      reading => updateAiTrainingProgress(reading)
   );

As you can see it is pretty complex syntax. It is because RxJS offers more operators than takeUntil and ways to combine them. You can think of pipe section as a decision-making how to handle incoming events, and subscribe what to do with events that pipe returns.

There are other operators you can use in the pipe section. However, there is one interesting thing about takeUntil I want to share with you before this article finishes.

Interesting fact

A takeUntil operator is widely used in Angular apps to prevent memory leaks.

 

Also check out:

Part 1: RxJS throttle
Part 2: RxJS debounce
Part 3: RxJS filter
Part 4: RxJS distinctUntilChanged

 

 

0 comments

Leave a comment

Please note, comments must be approved before they are published