fix:(useDebouncedCallback): Clean up timeout logic in strict mode

src/useDebouncedCallback.ts

@@ -1,7 +1,7 @@
 import { useMemo, useRef } from 'react'
 import useTimeout from './useTimeout'
 import useEventCallback from './useEventCallback'
-import useWillUnmount from './useWillUnmount'
+import useMounted from './useMounted'
 
 export interface UseDebouncedCallbackOptions {
   wait: number
@@ -71,11 +71,6 @@ function useDebouncedCallback<TCallback extends (...args: any[]) => any>(
 
   const timeout = useTimeout()
 
-  useWillUnmount(() => {
-    clearTimeout(timerRef.current)
-    isTimerSetRef.current = false
-  })
-
   return useMemo(() => {
     const hasMaxWait = !!maxWait
 
@@ -168,14 +163,14 @@ function useDebouncedCallback<TCallback extends (...args: any[]) => any>(
         if (hasMaxWait) {
           // Handle invocations in a tight loop.
           isTimerSetRef.current = true
-          timerRef.current = setTimeout(timerExpired, wait)
+          timeout.set(timerExpired, wait)
           return invokeFunc(lastCallTimeRef.current)
         }
       }
 
       if (!isTimerSetRef.current) {
         isTimerSetRef.current = true
-        timerRef.current = setTimeout(timerExpired, wait)
+        timerRef.current = timeout.set(timerExpired, wait)
       }
 
       return returnValueRef.current

test/useDebouncedCallback.test.tsx

@@ -8,6 +8,12 @@ describe('useDebouncedCallback', () => {
     jest.useFakeTimers()
   })
 
+  afterEach(() => {
+    act(() => {
+      jest.runAllTimers()
+    })
+  })
+
   it('should return a function that debounces input callback', () => {
     const callback = jest.fn()
 
@@ -21,7 +27,9 @@ describe('useDebouncedCallback', () => {
 
     expect(callback).not.toHaveBeenCalled()
 
-    jest.runOnlyPendingTimers()
+    act(() => {
+      jest.runOnlyPendingTimers()
+    })
 
     expect(callback).toHaveBeenCalledTimes(1)
     expect(callback).toHaveBeenCalledWith(3)
@@ -47,7 +55,6 @@ describe('useDebouncedCallback', () => {
     act(() => {
       jest.runOnlyPendingTimers()
     })
-
     expect(callback).toHaveBeenCalledTimes(1)
   })
 
@@ -90,16 +97,13 @@ describe('useDebouncedCallback', () => {
       result.current()
       result.current()
       result.current()
-
-      setTimeout(() => {
-        result.current()
-      }, 1001)
     })
 
     expect(callback).toHaveBeenCalledTimes(1)
 
     act(() => {
       jest.advanceTimersByTime(1001)
+      result.current()
     })
 
     expect(callback).toHaveBeenCalledTimes(3)
@@ -137,17 +141,25 @@ describe('useDebouncedCallback', () => {
     const callback = jest.fn(() => 42)
 
     const { result } = renderHook(() => useDebouncedCallback(callback, 1000))
+    let retVal
+
+    act(() => {
+      retVal = result.current()
+    })
 
-    const retVal = result.current()
     expect(callback).toHaveBeenCalledTimes(0)
     expect(retVal).toBeUndefined()
 
     act(() => {
       jest.runAllTimers()
     })
+
     expect(callback).toHaveBeenCalledTimes(1)
 
-    const subsequentResult = result.current()
+    let subsequentResult
+    act(() => {
+      subsequentResult = result.current()
+    })
 
     expect(callback).toHaveBeenCalledTimes(1)
     expect(subsequentResult).toBe(42)
@@ -160,7 +172,10 @@ describe('useDebouncedCallback', () => {
       useDebouncedCallback(callback, { wait: 1000, leading: true }),
     )
 
-    const retVal = result.current()
+    let retVal
+    act(() => {
+      retVal = result.current()
+    })
 
     expect(callback).toHaveBeenCalledTimes(1)
     expect(retVal).toEqual(42)

test/useDebouncedState.test.tsx

@@ -17,11 +17,13 @@ describe('useDebouncedState', () => {
     const wrapper = render(<Wrapper />)
     expect(wrapper.getByText('0')).toBeTruthy()
 
-    outerSetValue((cur: number) => cur + 1)
-    outerSetValue((cur: number) => cur + 1)
-    outerSetValue((cur: number) => cur + 1)
-    outerSetValue((cur: number) => cur + 1)
-    outerSetValue((cur: number) => cur + 1)
+    act(() => {
+      outerSetValue((cur: number) => cur + 1)
+      outerSetValue((cur: number) => cur + 1)
+      outerSetValue((cur: number) => cur + 1)
+      outerSetValue((cur: number) => cur + 1)
+      outerSetValue((cur: number) => cur + 1)
+    })
 
     expect(wrapper.getByText('0')).toBeTruthy()