@tater-archives/react-use-debounce
TypeScript icon, indicating that this package has built-in type declarations

1.0.7 • Public • Published

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} />

Dependencies (0)

    Dev Dependencies (11)

    Package Sidebar

    Install

    npm i @tater-archives/react-use-debounce

    Weekly Downloads

    0

    Version

    1.0.7

    License

    MIT

    Unpacked Size

    23 kB

    Total Files

    10

    Last publish

    Collaborators

    • tater-archives