useDebounce types improvement

[soywod]

I would like to propose a better typed version of your useDebounce, here my actual step:

import { useEffect, useRef } from 'react';
import cloneDeep from 'lodash/fp/cloneDeep';
import noop from 'lodash/fp/noop';

// ------------------------------------------------------------ # Type aliases #

type AnyCallback = (...args: any[]) => any;
type Debounce<Callback extends AnyCallback> = (...params: Parameters<Callback>) => void;

// -------------------------------------------------------------------- # Hook #

export default function useDebounce() {
  return <Callback extends AnyCallback>(callback: Callback, delay = 250) => {
    const timer = useRef<NodeJS.Timeout>(null);
    const debounce = useRef<Debounce<Callback>>(noop);

    useEffect(() => {
      debounce.current = (...params: Parameters<Callback>) => {
        const paramsCopy = cloneDeep(params);

        if (timer.current) {
          clearTimeout(timer.current);
        }

        // @ts-ignore
        // https://github.com/DefinitelyTyped/DefinitelyTyped/issues/31065
        timer.current = setTimeout(() => callback(...paramsCopy), delay);
      };
    }, []);

    return debounce.current;
  };
}

Usage:

import useDebounce from './path/to/useDebounce'

function Component() {
  const debounce = useDebounce()

  function handleClick(event: React.ChangeEvent<HTMLInputElement>) {
    console.log('Clicked with debounce')
  }

  return <input type="text" onChange={debounce(handleClick)} />
}

Any remark will be highly appreciated!

[benneq]

I think you shouldn't break the existing API without backwards compatibility