"Debouncing" limits how often a function executes. In web UIs, it's used for rapid-fire events like typing or resizing. Instead of running the function with every event, it waits until the events stop for a set time, then runs it once. This prevents excessive processing and improves performance.

Exercise

• create a custom hook useDebounce() which can be used to debounce a values which changes frequently
• the hook should be called as follows:

const debouncedValue = useDebounce(valueToBeDebounced, delayMilliseconds);

• demonstrate the hook with a text input field and an output of the debounced value

Example

Below is an example where the "debounced" value is not displayed until the user stops typing.

Note: this demo makes little sense on mobile (with no keyboard) since characters are submitted to the input field in batches