fix: debounce advanced search queries

src/hooks/useAdvancedSearch.tsx

@@ -11,6 +11,7 @@ import {
   parseAdvancedQuery,
 } from '../utils/searchUtils';
 import { createLogger } from '@/lib/logging';
+import { useDebouncedCallback } from './useDebounce';
 
 const logger = createLogger('use-advanced-search');
 
@@ -42,6 +43,8 @@ export const useAdvancedSearch = () => {
   const [history, setHistory] = useState<string[]>([]);
   const hasLoadedHistory = useRef(false);
   const activeRequestRef = useRef(0);
+  const queryRef = useRef<SearchQuery>(query);
+  queryRef.current = query;
 
   // Load search history from localStorage
   useEffect(() => {
@@ -93,12 +96,13 @@ export const useAdvancedSearch = () => {
   }, []);
 
   const performSearch = useCallback(async () => {
+    const currentQuery = queryRef.current;
     const hasFilters =
-      query.filters.topics.length > 0 ||
-      query.filters.types.filter((t: SearchContentType) => t !== 'all').length > 0 ||
-      query.filters.difficulty.length > 0;
+      currentQuery.filters.topics.length > 0 ||
+      currentQuery.filters.types.filter((t: SearchContentType) => t !== 'all').length > 0 ||
+      currentQuery.filters.difficulty.length > 0;
 
-    if (!query.text && !hasFilters) {
+    if (!currentQuery.text && !hasFilters) {
       setResults([]);
       return;
     }
@@ -145,29 +149,31 @@ export const useAdvancedSearch = () => {
 
       // Track analytics
       trackSearch({
-        query: query.text,
+        query: currentQuery.text,
         timestamp: Date.now(),
         resultsCount: mockResults.length,
         filtersApplied: [
-          ...query.filters.types,
-          ...query.filters.topics,
-          ...query.filters.difficulty,
+          ...currentQuery.filters.types,
+          ...currentQuery.filters.topics,
+          ...currentQuery.filters.difficulty,
         ],
       });
 
       // Parse advanced query
-      const parsed = parseAdvancedQuery(query.text);
+      const parsed = parseAdvancedQuery(currentQuery.text);
 
       setResults(mockResults);
-      addToHistory(query.text);
+      addToHistory(currentQuery.text);
     } catch (error) {
       logger.error('Search error', { error });
     } finally {
       if (currentRequestId === activeRequestRef.current) {
         setIsSearching(false);
       }
     }
-  }, [query, addToHistory]);
+  }, [addToHistory]);
+
+  const debouncedPerformSearch = useDebouncedCallback(performSearch, 300);
 
   const clearFilters = useCallback(() => {
     setQuery((prev: SearchQuery) => ({
@@ -182,7 +188,7 @@ export const useAdvancedSearch = () => {
     updateSearchText,
     updateFilters,
     updateSort,
-    performSearch,
+    performSearch: debouncedPerformSearch,
     clearFilters,
     results,
     isSearching,

src/hooks/useDebounce.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useCallback, useRef } from 'react';
 
 export function useDebounce<T>(value: T, delayMs = 300): T {
   const [debounced, setDebounced] = useState<T>(value);
@@ -12,3 +12,35 @@ export function useDebounce<T>(value: T, delayMs = 300): T {
 
   return debounced;
 }
+
+export function useDebouncedCallback<A extends any[]>(
+  callback: (...args: A) => void,
+  delayMs = 300
+): (...args: A) => void {
+  const callbackRef = useRef(callback);
+  const timerRef = useRef<NodeJS.Timeout | null>(null);
+
+  useEffect(() => {
+    callbackRef.current = callback;
+  }, [callback]);
+
+  useEffect(() => {
+    return () => {
+      if (timerRef.current) {
+        clearTimeout(timerRef.current);
+      }
+    };
+  }, []);
+
+  return useCallback(
+    (...args: A) => {
+      if (timerRef.current) {
+        clearTimeout(timerRef.current);
+      }
+      timerRef.current = setTimeout(() => {
+        callbackRef.current(...args);
+      }, delayMs);
+    },
+    [delayMs]
+  );
+}