Debouncing and throttling

Debouncing and throttling techniques are used to limit the number of times a function can be executed.

For instance, with functions attached to events such as clicking on buttons, it is technically the user who decides when the function attached to the button executes and how many times. Sometimes this isn't good for the performance of our website, especially when our application is built with React and the performance is really tied to how many times the website re-renders.

With the debounce technique, it doesn't matter how many times the event is fired; it will be executed again only after the specified amount of time has passed after the user stops firing the event.

The most common usage for debouncing functions is adding an expensive callback when the user writes in the <input /> element:

import debounce from "lodash.debounce";
export const InputElement = () => {
  const dispatch = useDispatch<Dispatch...