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

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

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); 
+  })
 })