How to use lodash debounce & lodash throtte in react

debounce-hooks.ts

import debounce from 'lodash.debounce'
import throttle from 'lodash.throttle'
import { useCallback } from 'react'
import type {
  DebounceSettings,
  DebounceSettingsLeading,
  DebouncedFunc,
  DebouncedFuncLeading,
  ThrottleSettings,
  ThrottleSettingsLeading,
} from 'lodash'

/**
 * Creates a debounced function that delays invoking `pureFunc` until after `wait` milliseconds 
 * have elapsed since the last invocation. The debounced function includes `cancel` and `flush` methods.
 * 
 * Provide an `options` object to specify leading and trailing invocation behavior. If both 
 * `leading` and `trailing` are `true`, `pureFunc` is invoked on the trailing edge only if 
 * the debounced function is invoked more than once during the `wait` period.
 * 
 * See [David Corbacho’s article](https://css-tricks.com/debouncing-throttling-explained-examples/) 
 * for details on debounce and throttle.
 *
 * @param pureFunc The function to debounce. Can accept state values or setters as parameters.
 * @param wait The number of milliseconds to delay.
 * @param options The options object.
 * @param options.leading Specify invoking on the leading edge of the timeout.
 * @param options.maxWait The maximum time `pureFunc` is allowed to be delayed before invocation.
 * @param options.trailing Specify invoking on the trailing edge of the timeout.
 * @returns Returns the new debounced function.
 *
 * @example
 * ```tsx
 * const [count, setCount] = useState(0);
 * 
 * const debouncedIncrement = useDebouncedCallback(
 *   ({ count, setCount }) => setCount(count + 1),
 *   300
 * );
 * 
 * // Usage inside an event handler
 * <button onClick={() => debouncedIncrement({ count, setCount })}>
 *   Click me
 * </button>
 * ```
 */
export function useDebouncedCallback<T extends (...args: any) => any>(
  pureFunc: T,
  wait: number | undefined,
  options: DebounceSettingsLeading
): DebouncedFuncLeading<T>

export function useDebouncedCallback<T extends (...args: any) => any>(
  pureFunc: T,
  wait?: number,
  options?: DebounceSettings
): DebouncedFunc<T> {
  return useCallback(debounce(pureFunc, wait, options), []);
}


/**
 * Creates a throttled function that ensures `pureFunc` is invoked at most once per every `wait` milliseconds.
 * The throttled function includes `cancel` and `flush` methods.
 * 
 * Provide an `options` object to specify leading and trailing invocation behavior. If both 
 * `leading` and `trailing` are `true`, `pureFunc` is invoked on the trailing edge only if 
 * the throttled function is invoked more than once during the `wait` period.
 * 
 * See [David Corbacho’s article](https://css-tricks.com/debouncing-throttling-explained-examples/) 
 * for details on debounce and throttle.
 * 
 * @param pureFunc The function to throttle. Can accept state values or setters as parameters.
 * @param wait The number of milliseconds to throttle invocations to.
 * @param options The options object.
 * @param options.leading Specify invoking on the leading edge of the timeout.
 * @param options.trailing Specify invoking on the trailing edge of the timeout.
 * @returns Returns the new throttled function.
 * 
 * @example
 * ```tsx
 * const [scrollY, setScrollY] = useState(0);
 * 
 * const throttledUpdate = useThrottleCallback(
 *   ({ scrollY, setScrollY }) => setScrollY(scrollY + 10),
 *   500
 * );
 * 
 * // Usage inside an event listener
 * useEffect(() => {
 *   const handleScroll = () => throttledUpdate({ scrollY, setScrollY });
 *   window.addEventListener("scroll", handleScroll);
 *   return () => window.removeEventListener("scroll", handleScroll);
 * }, [throttledUpdate]);
 * ```
 */
export function useThrottleCallback<T extends (...args: any) => any>(
  pureFunc: T,
  wait?: number,
  options?: ThrottleSettingsLeading
): DebouncedFuncLeading<T>;

export function useThrottleCallback<T extends (...args: any) => any>(
  pureFunc: T,
  wait?: number,
  options?: ThrottleSettings
): DebouncedFunc<T> {
  return useCallback(throttle(pureFunc, wait, options), []);
}