feat: useDebounce add cancel

docs/useDebounce.md

@@ -45,5 +45,5 @@ const Demo = () => {
 ## Reference
 
 ```ts
-useDebounce(fn, ms: number, args: any[]);
+const { cancel } = useDebounce(fn, ms: number, args: any[]);
 ```

src/useDebounce.ts

@@ -1,14 +1,27 @@
+import { useCallback, useRef } from 'react';
 import useUpdateEffect from './useUpdateEffect';
 
+
 const useDebounce = (fn: () => any, ms: number = 0, args: any[] = []) => {
+
+  const timer = useRef<number>();
+
   useUpdateEffect(() => {
-    const handle = setTimeout(fn.bind(null, args), ms);
 
+    timer.current = window.setTimeout(fn.bind(null, args), ms);
     return () => {
       // if args change then clear timeout
-      clearTimeout(handle);
+      window.clearTimeout(timer.current);
     };
   }, args);
+
+  const cancel = useCallback(() => {
+    if (timer.current) {
+      window.clearTimeout(timer.current);
+    }
+  }, []);
+
+  return { cancel };
 };
 
 export default useDebounce;

src/useUpdateEffect.ts

@@ -7,7 +7,7 @@ const useUpdateEffect: typeof useEffect = (effect, deps) => {
     if (isInitialMount.current) {
       isInitialMount.current = false;
     } else {
-      effect();
+      return effect();
     }
   }, deps);
 };