Optimizing data consumption – filter operators – Exploring Reactivity with RxJS

Our task of creating a typeahead type search field is complete, but we can make this functionality more efficient from the point of view of consuming HTTP requests. Here, in our case, if the user types just one letter, we have already started the search for information, but just one letter still results in a very open list.

It would be more interesting for our application to start looking for exercises from the third letter that the user types onward, and we can make the following modification for this behavior:
public exercises$ = this.entryForm.valueChanges.pipe(
  map((model) => model?.exercise ??
”),
  filter((exercise) => exercise.length >= 3),
  switchMap((exercise) => this.exerciseService.getExercises(exercise))
);

Here, we start using one of the most versatile features of RxJS, which is chaining operators for a certain action. We always need to keep in mind that the order of operators is very important, and the output of an operator is the input of the next one:

1. We use the map operator that we already know to extract only the exercise field from the form model and treat the data as if the field value is undefined.
2. The filter operator works similarly to the method of the same name for the Array object in JavaScript. It receives the exercise string and we validate that its length must be greater than or equal to three to go to the next operator.
3. Finally, we run the switchMap high-order operator to switch the form typing observable to the service’s HTTP request observable.

We can also, with another operator, add a waiting time for starting the flow of the observable, as in the following example:
const DEBOUNCE_TIME = 300;
public exercises$ = this.entryForm.valueChanges.pipe(
  debounceTime(DEBOUNCE_TIME),
  map((model) => model?.exercise ??
”),
  filter((exercise) => exercise.length >= 3),
  switchMap((exercise) => this.exerciseService.getExercises(exercise))
);

We added the debounceTime operator to create a delay time for the beginning of the flow, defining the time in milliseconds and with the good practice of using a constant to make the code clearer.

Let’s add one last optimization to our code with a new operator:
public exercises$ = this.entryForm.valueChanges.pipe(
  debounceTime(DEBOUNCE_TIME),
  map((model) => model?.exercise ??
”),
  filter((exercise) => exercise.length >= 3),
 distinctUntilChanged(),
  switchMap((exercise) => this.exerciseService.getExercises(exercise))
);

The distinctUntilChanged operator checks whether the stream’s data, here exercise, has changed from one iteration to another and triggers the next operator only if the value is different, saving even more unnecessary calls to the backend.

We’ve learned about a few operators, but the library has over 80. In the next section, we’ll learn how to navigate the library’s documentation.