chore: remove debounce

coder · jaaydenh · Dec 4, 2024 · Nov 13, 2024 · Nov 15, 2024 · Nov 17, 2024
commit 137c25c759862890c7644b1a0ae644714f4e1ea9
diff --git a/site/src/components/ui/multiple-selector.tsx b/site/src/components/ui/multiple-selector.tsx
@@ -4,6 +4,7 @@ import { Command as CommandPrimitive, useCommandState } from "cmdk";
 import { ChevronDown, X } from "lucide-react";
 import * as React from "react";
 import { forwardRef, useEffect } from "react";
+import { useDebouncedValue } from "hooks/debounce";
 
 import { Badge } from "components/ui/badge";
 import {
@@ -91,20 +92,6 @@ export interface MultipleSelectorRef {
 	reset: () => void;
 }
 
-export function useDebounce<T>(value: T, delay?: number): T {
-	const [debouncedValue, setDebouncedValue] = React.useState<T>(value);
-
-	useEffect(() => {
-		const timer = setTimeout(() => setDebouncedValue(value), delay || 500);
-
-		return () => {
-			clearTimeout(timer);
-		};
-	}, [value, delay]);
-
-	return debouncedValue;
-}
-
 function transToGroupOption(options: Option[], groupBy?: string) {
 	if (options.length === 0) {
 		return {};
@@ -218,7 +205,7 @@ const MultipleSelector = React.forwardRef<
 			transToGroupOption(arrayDefaultOptions, groupBy),
 		);
 		const [inputValue, setInputValue] = React.useState("");
-		const debouncedSearchTerm = useDebounce(inputValue, delay || 500);
+		const debouncedSearchTerm = useDebouncedValue(inputValue, delay || 500);
 
 		React.useImperativeHandle(
 			ref,