Do you want web input persisted without save buttons? You don’t want to hit the database with every keystroke. Here is how – with React and Firebase/Firestore.

Demo

^{_{source https://www.youtube.com/watch?v=o6ucWHbIp_A}}

Try it out yourself on https://debounce-d7a74.web.app/. The relevant code is here: https://github.com/lotharschulz/debounce. The demo web app contains additional firebase functions for regular clean up.

How to debounce?

AwesomeDebouncePromise will debounce and all returned promises will resolve to the last result. saveFieldValue is the function that contains the string as parameter that changes with every keystroke. debounceDelay is the time in milliseconds to wait until the promise returns.

The parameter fieldId is carried to the function saveFieldValue to ensure only one database update call is executed once the promise returns. I neither want the debouncing function always firing nor I want database updates replaying every keystroke.

The Debounce promise is called only if the debounce checkbox is checked. Otherwise, every keystroke triggers a database update.

Frontend

The debounce demo web app is based on react, typescript and material ui.

Create the react app using the typescript template:

npx create-react-app --template typescript debounce

Afterwards, create a file similar to UIElements.tsx and install dependencies e.g. with yarn add.
The code uses react state and effect hooks and focusses on functional react components. Functional react components are also the base for the AwesomeDebouncePromise usage.