Added ability to pass function with more then 1 parameter to useDebounce, also added useDebouncedValue

Author: nick-prat

packages/utils/hooks/useDebounce/index.ts

@@ -1,11 +1,11 @@
 'use client'
 
-import { useEffect, useRef } from 'react'
+import { useEffect, useState, useRef } from 'react'
 
 import debounce from 'lodash/debounce'
 
-const useDebounce = <T extends (params: any) => any>(
-  functionToDebounce: T,
+const useDebounce = <T extends any[], U>(
+  functionToDebounce: (...params: T) => U,
   { debounceTime = 400 } = {},
 ) => {
   const debouncedFuncRef = useRef(debounce(functionToDebounce, debounceTime, { trailing: true }))
@@ -20,4 +20,21 @@ const useDebounce = <T extends (params: any) => any>(
   return { debouncedFunction: debouncedFuncRef.current }
 }
 
-export default useDebounce
+const useDebouncedValue = <T>(value: T, debounceTime: number) => {
+  const [debouncedValue, setDebouncedValue] = useState(value)
+
+  useEffect(() => {
+    const handler = setTimeout(() => {
+      setDebouncedValue(value)
+    }, debounceTime)
+
+    return () => {
+      clearTimeout(handler)
+    }
+  }, [value, debounceTime])
+
+  return debouncedValue
+}
+
+
+export {useDebounce as default, useDebouncedValue}