useDebounceCallback calls debounce twice

[mariusGundersen]

This is probably a bug, but the bug report form didn't fit my report, since I didn't have a test case:

The implementation of useDebounceCallback is defined as this:

export function useDebounceCallback<T extends (...args: any) => ReturnType<T>>(
  func: T,
  delay = 500,
  options?: DebounceOptions,
): DebouncedState<T> {
  const debouncedFunc = useRef<ReturnType<typeof debounce>>()

  useUnmount(() => {
    if (debouncedFunc.current) {
      debouncedFunc.current.cancel()
    }
  })

  const debounced = useMemo(() => {
    const debouncedFuncInstance = debounce(func, delay, options)

    const wrappedFunc: DebouncedState<T> = (...args: Parameters<T>) => {
      return debouncedFuncInstance(...args)
    }

    wrappedFunc.cancel = () => {
      debouncedFuncInstance.cancel()
    }

    wrappedFunc.isPending = () => {
      return !!debouncedFunc.current
    }

    wrappedFunc.flush = () => {
      return debouncedFuncInstance.flush()
    }

    return wrappedFunc
  }, [func, delay, options])

  // Update the debounced function ref whenever func, wait, or options change
  useEffect(() => {
    debouncedFunc.current = debounce(func, delay, options)
  }, [func, delay, options])

  return debounced
}

Why is it using both useMemo and useRef/useEffect? The debouncedFunc.current value isn't returned, it's only used in useUnmount to cancel the scheduled debounce function. On the other hand, the result of useMemo is returned, but it is not cancelled on unmount. The observable effect of this is that if func was a setState then it would call it after the component has unmounted.

It seems like there are two implementions here when there should only be one. I guess the useRef/useEffect implementation is more robust.