react-use-debounce
Several utilities to debounce functions, preventing rapid calling of functions.
useDebounce
Creates a "debounced" version of a function which is only called after the debounced version is not called for a specified amount of time. Useful for inputs where the onChange uses a lot of processing.
Note: useDebounce expects the function to not change frequently. If the
supplied function is a literal, wrap it in useCallback.
Example Usage
const handleChange = useDebounce(expensiveSetter, 500);
// `onChange` will only be called if `expensiveSetter`
/// is not called for 500 milliseconds (0.5 seconds)
<input onChange={handleChange} />useUnsafeDebounce
Has the same functionality as useDebounce but doesn't call the function if
the component unmounts, in exchange for less overhead.
useDebouncedState
Maintains an internal state that is always up-to-date and debounces it to an external state. Useful if you need a controlled component but still want to debounce the state.
Example Usage
const [state, setState] = useDebouncedState(externalState, expensiveSetter, 500);
// ExampleComponent will update with new values but expensiveSetter
// will not be called until it stops being set for 500 milliseconds
<ExampleComponent value={state} onChange={setState} />