feat: add useDebouncedCallback hook

Author: kyletsang

src/useDebouncedCallback.ts

@@ -0,0 +1,23 @@
+import { useCallback } from 'react'
+import useTimeout from './useTimeout'
+
+/**
+ * Creates a debounced function that will invoke the input function after the
+ * specified delay.
+ *
+ * @param fn a function that will be debounced
+ * @param delay The milliseconds delay before invoking the function
+ */
+export default function useDebouncedCallback<
+  TCallback extends (...args: any[]) => any
+>(fn: TCallback, delay: number): TCallback {
+  const timeout = useTimeout()
+  return useCallback(
+    (...args: any[]) => {
+      timeout.set(() => {
+        fn(...args)
+      }, delay)
+    },
+    [fn, delay],
+  ) as any
+}

test/useDebouncedCallback.test.tsx

@@ -0,0 +1,29 @@
+import React from 'react'
+import { mount } from 'enzyme'
+import useDebouncedCallback from '../src/useDebouncedCallback'
+
+describe('useDebouncedCallback', () => {
+  it('should return a function that debounces input callback', () => {
+    jest.useFakeTimers()
+    const spy = jest.fn()
+
+    let debouncedFn;
+
+    function Wrapper() {
+      debouncedFn = useDebouncedCallback(spy, 500)
+      return <span />
+    }
+
+    mount(<Wrapper />)
+
+    debouncedFn(1)
+    debouncedFn(2)
+    debouncedFn(3)
+    expect(spy).not.toHaveBeenCalled()
+
+    jest.runOnlyPendingTimers()
+    
+    expect(spy).toHaveBeenCalledTimes(1)
+    expect(spy).toHaveBeenCalledWith(3)
+  })
+})