diff --git a/packages/compose/README.md b/packages/compose/README.md index 7ea63819d97b8..418c1658d1980 100644 --- a/packages/compose/README.md +++ b/packages/compose/README.md @@ -196,7 +196,9 @@ render in components in `useCallback`. _Parameters_ -- _args_ `[TFunc, ...DebounceTailParameters]`: Arguments passed to Lodash's `debounce`. +- _fn_ `TFunc`: +- _wait_ `[number]`: +- _options_ `[import('lodash').DebounceSettings]`: _Returns_ diff --git a/packages/compose/src/hooks/use-debounce/index.js b/packages/compose/src/hooks/use-debounce/index.js index 8b86103100ecc..ae1f1d1873c32 100644 --- a/packages/compose/src/hooks/use-debounce/index.js +++ b/packages/compose/src/hooks/use-debounce/index.js @@ -10,17 +10,6 @@ import { useMemoOne } from 'use-memo-one'; import { useEffect } from '@wordpress/element'; /* eslint-disable jsdoc/valid-types */ -/** - * @template T - * @typedef {T extends [any, ...infer R] ? R : never} TailParameters - */ - -// We want to keep the type of the function that is passed in but the rest we don't -// really care about, so this allows us to ignore the details of the rest of the paramters -// while still maintaining the proper generic type for `debounce` where the returned -// function matchest the signature of the passed in function. -/** @typedef {TailParameters>} DebounceTailParameters */ - /** * Debounces a function with Lodash's `debounce`. A new debounced function will * be returned and any scheduled calls cancelled if any of the arguments change, @@ -28,13 +17,19 @@ import { useEffect } from '@wordpress/element'; * render in components in `useCallback`. * * @template {(...args: any[]) => void} TFunc - * @param {[TFunc, ...DebounceTailParameters]} args Arguments passed to Lodash's `debounce`. * + * @param {TFunc} fn + * @param {number} [wait] + * @param {import('lodash').DebounceSettings} [options] * @return {TFunc & import('lodash').Cancelable} Debounced function. */ -export default function useDebounce( ...args ) { +export default function useDebounce( fn, wait, options ) { /* eslint-enable jsdoc/valid-types */ - const debounced = useMemoOne( () => debounce( ...args ), args ); + const debounced = useMemoOne( () => debounce( fn, wait, options ), [ + fn, + wait, + options, + ] ); useEffect( () => () => debounced.cancel(), [ debounced ] ); return debounced; }