conflicts

1 files changed, 27 insertions, 0 deletions

diff --git a/apps/web/src/hooks/useDebounce.ts b/apps/web/src/hooks/useDebounce.ts
new file mode 100644
index 00000000..d133b1ae
--- /dev/null
+++ b/apps/web/src/hooks/useDebounce.ts
@@ -0,0 +1,27 @@
+import { useEffect, useState } from "react";
+
+/**
+ * Use this hook when you need to debounce a value.
+ * @param value
+ * @param delay in milliseconds
+ */
+export const useDebounce = <T>(value: T, delay: number) => {
+  // State and setters for debounced value
+  const [debouncedValue, setDebouncedValue] = useState<T>(value);
+
+  useEffect(() => {
+    // Update debounced value after delay
+    const handler = setTimeout(() => {
+      setDebouncedValue(value);
+    }, delay);
+
+    // Cancel the timeout if value changes (also on delay change or unmount)
+    // This is how we prevent debounced value from updating if the value is changed
+    // within the delay period. Timeout gets cleared and restarted.
+    return () => {
+      clearTimeout(handler);
+    };
+  }, [value, delay]);
+
+  return debouncedValue;
+};