What is debouncing?

Debouncing is a method to hold an OnChange action for a certain set period of time. If any change is made to the attached input box the timer resets and starts to wait again before triggering the needed action.

Why would I use debouncing?

You want to use debouncing when the user input directly affects an external system or starts an action that causes a lot of pressure on the local system. This component is useful when you want to use an preview of the selected data but expect that end-users will not directly select the correct screen entity. Instead of directly getting all needed resources after a click (like getting a photo, a list of names, etc) you wait for a set period of time (default is 350ms). This allows end-users to select something else or add data before you start an expensive action.

How do I use it?

1. Add an input box to the screen and give it a name
2. Add the debounce widget to the screen and bind it to the input box via it's Id
3. Add an action (required) to the debounce widget
4. Create the needed flow inside this action to perform all steps needed

Example

In the underneath example you can see the effect of debounce. For every character types an OnChange event is triggered. Without debouncing this would result in 8 API calls but with debouncing we only execute the API once and get relevant data at the first try greatly reducing pressure on the back-end.