Optimizing RxJS streams with strategic operator selection
Although RxJS is considered a very performant library, if we aren’t careful, we can introduce performance bottlenecks within our system. To prevent this scenario from happening, we need to understand what might lead to inefficient RxJS streams:
- Over-subscription and memory leaks
- Inefficient operators and complex pipelines
- Complex data flows
- Misunderstanding cold and hot Observables
How to do it…
In this recipe, we’re going to address and prevent most of the potential performance bottlenecks in one simple RxJS stream, such as search input that sends HTTP requests based on a search query. We’ll also create a simple custom RxJS operator to benchmark the speed of stream execution.
Step 1 – Creating a stream of events
First, we’ll define a simple input in the UI and create a stream of user input events. In app.component.html, input the following...
