Master RxJs: Debounce all but first

When the first value should be served synchronously, but all subsequent should be served asynchronously.

Lars Holdaas
2 min readMar 12, 2020
Photo by Kai Pilger on Unsplash

With Reactive Forms and other input set-ups that accepts user input as an Observable Stream, it has become quite standard to use the debounceTime operator to make sure rapid input is ignored until the user is seemingly finished inputting data.

However, in the case of forms where we programmatically insert data after the forms have been created and reaction listeners have been attached, we often want the first inserted value to NOT be debounced.

A realistic example would be when a user navigates back to a page with a form the user has previously edited but not yet submitted.

Since we’re focused on giving the users an excellent user-experience, we have of course stored the previous input somewhere, so that it can be displayed as the user navigates back to the page.

We pull the data from wherever it is stored, be it a state manager, local storage or an api, and insert it into the fields on the page, but we also want this data to be subject to verification or UI processing procedures associated with that input, and we want this done immediately.

--

--

Lars Holdaas

Web developer working in Japan. Passionate about maintanability and clean coding.