This lesson preview is part of the Mastering RxJS: A Compact Journey from Beginner to Pro course and can be unlocked immediately with a \newline Pro subscription or a single-time purchase. Already have access to this course? Log in here.
Get unlimited access to Mastering RxJS: A Compact Journey from Beginner to Pro, plus 80+ \newline books, guides and courses with the \newline Pro subscription.
[00:00 - 00:10] By now you've probably noticed that each higher order observable has its unique characteristic and concat map is no different. What's unique about concat map is its queuing mechanism.
[00:11 - 00:15] When we look at the timeline, it's a pretty simple queuing mechanism. This is the timeline again.
[00:16 - 00:31] When I start the first request and then I want to start the second one, let's say some time around here, I'm going to start the second request. What will happen is, it will wait until the first request finishes and then it will start the second one.
[00:32 - 00:49] Right here, the first one finishes, then the second one starts and then it finishes sometime around here and if we start a third request right about here, then it will wait for the third one to finish and then the third one will start out here. Concat map can be handy in the following scenarios.
[00:50 - 00:57] Let's say there is a complex form and we want to save the progress of the user. For this specific use case, we want to build autosaving functionality.
[00:58 - 01:04] We save the form either in memory or in the backend. Once the user fills in the data, we save a snapshot of the form.
[01:05 - 01:12] Once he fills more data in, we will wait until the previous save is done. We will queue the next one and so forth and so forth.
[01:13 - 01:32] This way, every time the user makes progress, we'll queue every moment in time for the user so that when he comes back in, he will always get the latest version of the form. Another use case for a concat map could be when we want to display animations that are dependent on each other and they should happen in a specific order.
[01:33 - 01:54] For example, if a user triggers multiple actions at the same time and after each action you are showing somewhere at the bottom a notification of success or error. Assume that the notifications are not stackable, they don't come on top of each other but they always appear at the same place. It's probably a good idea to wait until the notification disappears before you show the next one.
[01:55 - 02:00] Now let's go back to code and see it in action. The only change I'm going to do is convert this to concat map.
[02:01 - 02:27] Now if I toggle between 36 and 48 MP, what I'm expecting to see is that product 1 and product 2 are being toggled so I'm not going to see the same as with the merge map operator where product 1 comes 2 times in row or product 2 comes 2 times in row and in here in the networking tab we can also see that a request is being executed one at a time. So the next request is waiting for the previous one to finish before it can start.
[02:28 - 02:59] We can also combine concat map with operators such as debounce time, let's say 300ms and distinct until changed, in order to optimize and send less requests to the backend. What the debounce time does is, it's like a delay but passes only the most recent notification from each burst of emissions, basically just waits for 300ms and then fires the next request and distinct until changed, is like the name says, it will wait for this value to be different than the previous one in order to trigger.
[03:00 - 03:08] So basically it filters out the same values if they come one after another. There are a few things I want to warn you about when using the concat map operator.
[03:09 - 03:25] For instance, race conditions across tabs are not prevented by the concat map operator. So in the case of auto saving, if we open a new tab and we try to edit the same form, we'll get a race condition where eventually the last version of the form might get out of sync.
[03:26 - 03:42] Also, concat map doesn't help if multiple users edit the same resource, it's a local stream operator. In the case of auto saving, although concat map can be a good starting point for the auto saving functionality, there is much more work required to get it working properly.
[03:43 - 03:53] So be careful about it. To give a quick summary, concat map has a queuing mechanism and it's quite handy for auto saving or animation or whatever operation where the order is important.