feat(useDebouncedCallback): return value from debounced function

Author: jquense

src/useDebouncedCallback.ts

@@ -9,21 +9,42 @@ export interface UseDebouncedCallbackOptions {
   maxWait?: number
 }
 
+export interface UseDebouncedCallbackOptionsLeading
+  extends UseDebouncedCallbackOptions {
+  leading: true
+}
+
 /**
  * Creates a debounced function that will invoke the input function after the
  * specified wait.
  *
  * @param fn a function that will be debounced
  * @param waitOrOptions a wait in milliseconds or a debounce configuration
  */
-export default function useDebouncedCallback<
-  TCallback extends (...args: any[]) => any,
->(
+function useDebouncedCallback<TCallback extends (...args: any[]) => any>(
+  fn: TCallback,
+  options: UseDebouncedCallbackOptionsLeading,
+): (...args: Parameters<TCallback>) => ReturnType<TCallback>
+
+/**
+ * Creates a debounced function that will invoke the input function after the
+ * specified wait.
+ *
+ * @param fn a function that will be debounced
+ * @param waitOrOptions a wait in milliseconds or a debounce configuration
+ */
+function useDebouncedCallback<TCallback extends (...args: any[]) => any>(
+  fn: TCallback,
+  waitOrOptions: number | UseDebouncedCallbackOptions,
+): (...args: Parameters<TCallback>) => ReturnType<TCallback> | undefined
+
+function useDebouncedCallback<TCallback extends (...args: any[]) => any>(
   fn: TCallback,
   waitOrOptions: number | UseDebouncedCallbackOptions,
-): (...args: Parameters<TCallback>) => void {
+): (...args: Parameters<TCallback>) => ReturnType<TCallback> | undefined {
   const lastCallTimeRef = useRef<number | null>(null)
   const lastInvokeTimeRef = useRef(0)
+  const returnValueRef = useRef<ReturnType<TCallback>>()
 
   const isTimerSetRef = useRef(false)
   const lastArgsRef = useRef<unknown[] | null>(null)
@@ -50,10 +71,11 @@ export default function useDebouncedCallback<
       isTimerSetRef.current = true
       timeout.set(timerExpired, wait)
 
-      // Invoke the leading edge.
-      if (leading) {
-        invokeFunc(time)
+      if (!leading) {
+        return returnValueRef.current
       }
+
+      return invokeFunc(time)
     }
 
     function trailingEdge(time: number) {
@@ -66,6 +88,7 @@ export default function useDebouncedCallback<
       }
 
       lastArgsRef.current = null
+      return returnValueRef.current
     }
 
     function timerExpired() {
@@ -94,7 +117,9 @@ export default function useDebouncedCallback<
       lastArgsRef.current = null
       lastInvokeTimeRef.current = time
 
-      return fn(...args)
+      const retValue = fn(...args)
+      returnValueRef.current = retValue
+      return retValue
     }
 
     function shouldInvoke(time: number) {
@@ -136,6 +161,10 @@ export default function useDebouncedCallback<
         isTimerSetRef.current = true
         setTimeout(timerExpired, wait)
       }
+
+      return returnValueRef.current
     }
   }, [fn, wait, maxWait, leading, trailing])
 }
+
+export default useDebouncedCallback

test/useDebouncedCallback.test.tsx

@@ -133,6 +133,39 @@ describe('useDebouncedCallback', () => {
     expect(callback).toHaveBeenCalledTimes(2)
   })
 
+  it('Subsequent calls to the debounced function return the result of the last func invocation.', () => {
+    const callback = jest.fn(() => 42)
+
+    const { result } = renderHook(() => useDebouncedCallback(callback, 1000))
+
+    const retVal = result.current()
+    expect(callback).toHaveBeenCalledTimes(0)
+    expect(retVal).toBeUndefined()
+
+    act(() => {
+      jest.runAllTimers()
+    })
+    expect(callback).toHaveBeenCalledTimes(1)
+
+    const subsequentResult = result.current()
+
+    expect(callback).toHaveBeenCalledTimes(1)
+    expect(subsequentResult).toBe(42)
+  })
+
+  it('Returns the value when leading  immediately', () => {
+    const callback = jest.fn(() => 42)
+
+    const { result } = renderHook(() =>
+      useDebouncedCallback(callback, { wait: 1000, leading: true }),
+    )
+
+    const retVal = result.current()
+
+    expect(callback).toHaveBeenCalledTimes(1)
+    expect(retVal).toEqual(42)
+  })
+
   it("won't call both on the leading edge and on the trailing edge if leading and trailing are set up to true and function call is only once", () => {
     const callback = jest.fn()
 

test/useDebouncedValue.test.tsx

@@ -53,8 +53,6 @@ describe('useDebouncedValue', () => {
       rerender(<Wrapper text={'Hello world'} />)
     })
 
-    // value should be set immediately by first leading call
-
     expect(getByText('Hello world')).toBeTruthy()
 
     act(() => {