RxJs switchMap Operator

#javascript #rxjs #frontend #webdev

Hello everyone 👋, I hope you're doing great.

Every RxJs developer should know about this operator.

switchMap

Consider typeahead functionality. Whenever a user enters something we will make calls for each keypress event. Ofcourse, we can use debounce and throttling methods to reduce unnecessary function calls.

Let's say you want to search for Canada. Without rxjs the functionality would be like calling 6 times XHR request. Ideally, we don't want to bother response for the first 5 calls. We want a response only for the 6th call. That achievement would make a great developer. Let's do that.

Add an event listener to the input element and pipe it with switchMap operator.

Note: getCountry method should return Observable

Basically observables should be subscribed. Only then it invokes. SwitchMap will subscribe inner function and here it is subscribing getCountry method.

Tada!!!

If you observe the above image, all the requests got cancelled except last one.

According to official docs, switchMap defines
Projects each source value to an Observable which is merged in the output Observable, emitting values only from the most recently projected Observable.

Thanks for your time✌️

Modular, Fast, and Built for Developers

CKEditor 5 gives you full control over your editing experience. A modular architecture means you get high performance, fewer re-renders and a setup that scales with your needs.

Start now