Merge pull request #426 from baradoner/master

🐛 Fix Bug In useDebouncedCallback Doesn't Consider Its Dependencies (#420)


Sorry for the very, very late reply! 
Thanks for this contribution

Author: antonioru

src/useDebouncedCallback.ts

@@ -20,18 +20,18 @@ const defaultOptions: DebounceOptions = {
  * If time is not defined, its default value will be 250ms.
  */
 const useDebouncedCallback = <TCallback extends GenericFunction>
-  (fn: TCallback, dependencies?: DependencyList, wait: number = 600, options: DebounceOptions = defaultOptions) => {
+  (fn: TCallback, dependencies: DependencyList = [], wait: number = 600, options: DebounceOptions = defaultOptions) => {
   const debounced = useRef(debounce<TCallback>(fn, wait, options))
 
   useEffect(() => {
     debounced.current = debounce(fn, wait, options)
-  }, [fn, wait, options])
+  }, [fn, wait, options, ...dependencies])
 
   useWillUnmount(() => {
     debounced.current?.cancel()
   })
 
-  return useCallback(debounced.current, dependencies ?? [])
+  return useCallback((...args: Parameters<TCallback>) => debounced.current(...args), [...dependencies])
 }
 
 export default useDebouncedCallback

src/useThrottledCallback.ts

@@ -19,18 +19,18 @@ const defaultOptions: ThrottleSettings = {
  * If time is not defined, its default value will be 250ms.
  */
 const useThrottledCallback = <TCallback extends GenericFunction>
-  (fn: TCallback, dependencies?: DependencyList, wait: number = 600, options: ThrottleSettings = defaultOptions) => {
+  (fn: TCallback, dependencies: DependencyList = [], wait: number = 600, options: ThrottleSettings = defaultOptions) => {
   const throttled = useRef(throttle<TCallback>(fn, wait, options))
 
   useEffect(() => {
     throttled.current = throttle(fn, wait, options)
-  }, [fn, wait, options])
+  }, [fn, wait, options, ...dependencies])
 
   useWillUnmount(() => {
     throttled.current?.cancel()
   })
 
-  return useCallback(throttled.current, dependencies ?? [])
+  return useCallback((...args: Parameters<TCallback>) => throttled.current(...args), [...dependencies])
 }
 
 export default useThrottledCallback

test/useDebouncedCallback.spec.js

@@ -47,4 +47,37 @@ describe('useDebouncedCallback', () => {
     expect(spy.called).to.be.true
     expect(spy.callCount).to.equal(1)
   })
+
+  it('should use the latest callback', async () => {
+    const firstSpy = sinon.spy();
+    const secondSpy = sinon.spy();
+
+    const TestComponent = () => {
+      const [callback, setCallback] = React.useState(() => firstSpy);
+      const debouncedCallback = useDebouncedCallback(callback, [callback], 250);
+
+      React.useEffect(() => {
+        debouncedCallback();
+        debouncedCallback();
+
+        setTimeout(() => {
+          setCallback(() => secondSpy);
+        }, 100);
+
+        setTimeout(() => {
+          debouncedCallback();
+          debouncedCallback();
+        }, 200);
+      }, [debouncedCallback]);
+
+      return <div />;
+    };
+
+    render(<TestComponent />);
+
+    await promiseDelay(600);
+
+    expect(firstSpy.callCount).to.equal(1); 
+    expect(secondSpy.callCount).to.equal(1); 
+  })
 })

test/useThrottledCallback.spec.js

@@ -47,4 +47,34 @@ describe('useThrottledCallback', () => {
     expect(spy.called).to.be.true
     expect(spy.callCount).to.equal(1)
   })
+
+  it('should use the latest callback', async () => {
+    const firstSpy = sinon.spy();
+    const secondSpy = sinon.spy();
+
+    const TestComponent = () => {
+      const [callback, setCallback] = React.useState(() => firstSpy);
+      const throttledCallback = useThrottledCallback(callback, [callback], 250); 
+
+      React.useEffect(() => {
+        throttledCallback();
+        throttledCallback();
+      }, [throttledCallback]);
+
+      React.useEffect(() => {
+        setTimeout(() => {
+          setCallback(() => secondSpy);
+        }, 100);
+      }, []);
+
+      return <div />;
+    };
+
+    render(<TestComponent />);
+
+    await promiseDelay(600);
+
+    expect(firstSpy.callCount).to.equal(1); 
+    expect(secondSpy.callCount).to.equal(1); 
+  })
 })