use-debouncy/lib/index.d.mts

🌀 Small (~0.2kb) debounce effect hook for React with TypeScript support

import { EffectCallback, DependencyList } from 'react';

/**
 *
 * Simulates the standard behavior of the useEffect hook.
 * It does not get called on the initial render.
 * If the hook hasn't been called for N milliseconds, it invokes the provided function.
 *
 * @param fn - Function that will be called after the timer expires.
 * @param wait - Number of milliseconds to delay.
 * @param deps - Array values that the debounce depends (like as useEffect).
 * @example
 * ```ts
 *  const App = () => {
 *    const [value, setValue] = useState('');
 *    const debounceFn = useDebouncyFn(onChange, 300);
 *
 *     useDebouncyEffect(
 *      () => { onChange(value) },
 *      400,
 *      [value]
 *     );
 *
 *    return <input value={value} onChange={(event) => setValue(event.target.value)} />
 * }
 * ```
 */
declare const useDebouncyEffect: (fn: EffectCallback, wait?: number, deps?: DependencyList) => void;

/**
 *
 * The hook returns a function, and when that function is called,
 * the provided function will be invoked after N milliseconds,
 * unless the function is called again.
 *
 * @param fn - Function that will be called after the timer expires.
 * @param wait - Number of milliseconds to delay.
 * @example
 * ```ts
 *  const App = () => {
 *    const debounceFn = useDebouncyFn(onChange, 300);
 *
 *    return <input onChange={debounceFn} />
 * }
 * ```
 */
declare const useDebouncyFn: <Fn extends (...args: Parameters<Fn>) => void>(fn: Fn, wait?: number) => ((...args: Parameters<Fn>) => void);

export { useDebouncyEffect, useDebouncyFn };