diff --git a/packages/ui-app/app/_hooks/useDebounce.ts b/packages/ui-app/app/_hooks/useDebounce.ts
new file mode 100644
index 00000000..549c01c2
--- /dev/null
+++ b/packages/ui-app/app/_hooks/useDebounce.ts
@@ -0,0 +1,19 @@
+import { DependencyList, useEffect, useRef } from "react"
+
+export const useDebounce = (cb: () => void, dependencies: DependencyList, time?: number) => {
+  const timeout = useRef(0)
+
+  useEffect(() => {
+    timeout.current = setTimeout(() => {
+      cb()
+    }, time || 300) as unknown as number
+
+    return () => {
+      if (timeout.current) {
+        console.log('debounce run')
+        clearTimeout(timeout.current)
+      }
+    }
+  }, dependencies)
+}
+