chore: use loadash debounce

autogpt_platform/frontend/src/components/edit/control/BlocksControl/helpers.ts

@@ -1,4 +1,3 @@
-import { useState, useEffect } from "react";
 import { beautifyString } from "@/lib/utils";
 import { Block, BlockUIType } from "@/lib/autogpt-server-api";
 import jaro from "jaro-winkler";
@@ -22,17 +21,6 @@ export interface GraphState {
   hasInputNodes: boolean;
 }
 
-export function useDebounce<T>(value: T, delay: number): T {
-  const [debouncedValue, setDebouncedValue] = useState<T>(value);
-
-  useEffect(() => {
-    const handler = setTimeout(() => setDebouncedValue(value), delay);
-    return () => clearTimeout(handler);
-  }, [value, delay]);
-
-  return debouncedValue;
-}
-
 export function getBlockSearchData(
   block: Pick<Block, "name" | "description">,
 ): BlockSearchData {

autogpt_platform/frontend/src/components/edit/control/BlocksControl/useBlocksControl.ts

@@ -1,4 +1,5 @@
 import { useState, useMemo } from "react";
+import debounce from "lodash/debounce";
 import {
   Block,
   BlockUIType,
@@ -7,7 +8,6 @@ import {
 } from "@/lib/autogpt-server-api";
 import { CustomNode } from "@/components/CustomNode";
 import {
-  useDebounce,
   getBlockSearchData,
   matchesSearch,
   getBlockAvailability,
@@ -32,8 +32,6 @@ export function useBlocksControl({ blocks, flows, nodes, addBlock }: Args) {
   const [searchQuery, setSearchQuery] = useState("");
   const [selectedCategory, setSelectedCategory] = useState<string | null>(null);
 
-  const debouncedSearchQuery = useDebounce(searchQuery, 200);
-
   // Memoize graph state checks to avoid recalculating on every render
   const graphState = useMemo(
     (): GraphState => ({
@@ -92,7 +90,7 @@ export function useBlocksControl({ blocks, flows, nodes, addBlock }: Args) {
     return allBlocks
       .map((block) => ({
         block,
-        score: matchesSearch(block, debouncedSearchQuery),
+        score: matchesSearch(block, searchQuery),
       }))
       .filter(
         ({ block, score }) =>
@@ -108,13 +106,19 @@ export function useBlocksControl({ blocks, flows, nodes, addBlock }: Args) {
   }, [
     blocksWithSearchData,
     agentBlocksWithSearchData,
-    debouncedSearchQuery,
+    searchQuery,
     selectedCategory,
     graphState,
   ]);
 
   const categories = useMemo(() => extractCategories(blocks), [blocks]);
 
+  // Create debounced version of setSearchQuery
+  const debouncedSetSearchQuery = useMemo(
+    () => debounce(setSearchQuery, 200),
+    [],
+  );
+
   function resetFilters() {
     setSearchQuery("");
     setSelectedCategory(null);
@@ -132,7 +136,7 @@ export function useBlocksControl({ blocks, flows, nodes, addBlock }: Args) {
 
   return {
     searchQuery,
-    setSearchQuery,
+    setSearchQuery: debouncedSetSearchQuery,
     selectedCategory,
     filteredAvailableBlocks,
     categories,