fix: prevent memory leak in debounced submit function

- Add cancel method to debounce utility function with proper TypeScript typing
- Add cleanup effect in useStacSearch to cancel pending debounced calls
- Prevent orphaned timeouts when component unmounts or _submit function changes

Previously, when _submit changed, a new debounced function was created but
the old one's timeout wasn't cancelled, causing potential memory leaks and
race conditions where stale searches could execute after newer ones.

Author: AliceR

src/hooks/useStacSearch.ts

@@ -209,7 +209,14 @@ function useStacSearch(): StacSearchHook {
     setCurrentRequest({ type: 'search', payload });
   }, [getSearchPayload]);
 
-  const submit = useMemo(() => debounce(_submit), [_submit]);
+  const submit = useMemo(() => debounce(_submit, 300), [_submit]);
+
+  // Clean up debounced function on unmount or when _submit changes
+  useEffect(() => {
+    return () => {
+      submit.cancel();
+    };
+  }, [submit]);
 
   return {
     submit,

src/utils/debounce.ts

@@ -1,11 +1,24 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-const debounce = <F extends (...args: any) => any>(fn: F, ms = 250) => {
+
+type DebouncedFunction<T extends (...args: any) => any> = T & {
+  cancel: () => void;
+};
+
+const debounce = <F extends (...args: any) => any>(fn: F, ms = 250): DebouncedFunction<F> => {
   let timeoutId: ReturnType<typeof setTimeout>;
 
-  return function (this: any, ...args: any[]) {
+  const debouncedFn = function (this: any, ...args: any[]) {
     clearTimeout(timeoutId);
     timeoutId = setTimeout(() => fn.apply(this, args), ms);
+  } as F;
+
+  // Add cancel method to clear pending timeouts
+  (debouncedFn as DebouncedFunction<F>).cancel = () => {
+    clearTimeout(timeoutId);
   };
+
+  return debouncedFn as DebouncedFunction<F>;
 };
 
 export default debounce;
+export type { DebouncedFunction };