fix: cleanup websocket connections, add debounce

Author: jaaydenh

site/src/DynamicForm.tsx

@@ -12,6 +12,7 @@ import { Input } from "./components/Input/Input";
 import { Switch } from "./components/Switch/Switch";
 import { useUsers } from './hooks/useUsers';
 import { useDirectories } from './hooks/useDirectories';
+import { useDebouncedFunction } from './hooks/debounce';
 
 export function DynamicForm() {
   const serverAddress = "localhost:8100";
@@ -45,14 +46,18 @@ export function DynamicForm() {
   } = useDirectories(serverAddress, urlTestdata);
 
   const handleTestdataChange = (value: string) => {
+    reset({});
+    setPrevValues({});
+    setResponse(null);
+    setCurrentId(0);
+    
     const params = new URLSearchParams(window.location.search);
     params.set('testdata', value);
     const newUrl = `${window.location.pathname}?${params.toString()}`;
     window.history.replaceState({}, '', newUrl);
     setUrlTestdata(value);
     setPlan("");
     setUser("");
-    setResponse(null);
   };
 
   const { 
@@ -234,14 +239,21 @@ export function DynamicForm() {
         <Controller
             name={param.name}
             control={methods.control}
-            render={({ field }) => (
-              <Input
-                onChange={field.onChange}
-                className="w-[300px]"
-                type={mapParamTypeToInputType(param.type)}
-                defaultValue={param.default_value}
-              />
-            )}
+            render={({ field }) => {
+              const { debounced } = useDebouncedFunction(
+                (e: React.ChangeEvent<HTMLInputElement>) => field.onChange(e),
+                1000
+              );
+
+              return (
+                <Input
+                  onChange={debounced}
+                  className="w-[300px]"
+                  type={mapParamTypeToInputType(param.type)}
+                  defaultValue={param.default_value}
+                />
+              );
+            }}
           />
         {renderDiagnostics(param.diagnostics)}
       </div>

site/src/hooks/debounce.ts

@@ -0,0 +1,99 @@
+/**
+ * @file Defines hooks for created debounced versions of functions and arbitrary
+ * values.
+ *
+ * It is not safe to call a general-purpose debounce utility inside a React
+ * render. It will work on the initial render, but the memory reference for the
+ * value will change on re-renders. Most debounce functions create a "stateful"
+ * version of a function by leveraging closure; but by calling it repeatedly,
+ * you create multiple "pockets" of state, rather than a centralized one.
+ *
+ * Debounce utilities can make sense if they can be called directly outside the
+ * component or in a useEffect call, though.
+ */
+import { useCallback, useEffect, useRef, useState } from "react";
+
+type useDebouncedFunctionReturn<Args extends unknown[]> = Readonly<{
+	debounced: (...args: Args) => void;
+
+	// Mainly here to make interfacing with useEffect cleanup functions easier
+	cancelDebounce: () => void;
+}>;
+
+/**
+ * Creates a debounce function that is resilient to React re-renders, as well as
+ * a function for canceling a pending debounce.
+ *
+ * The returned-out functions will maintain the same memory references, but the
+ * debounce function will always "see" the most recent versions of the arguments
+ * passed into the hook, and use them accordingly.
+ *
+ * If the debounce time changes while a callback has been queued to fire, the
+ * callback will be canceled completely. You will need to restart the debounce
+ * process by calling the returned-out function again.
+ */
+export function useDebouncedFunction<
+	// Parameterizing on the args instead of the whole callback function type to
+	// avoid type contra-variance issues
+	Args extends unknown[] = unknown[],
+>(
+	callback: (...args: Args) => void | Promise<void>,
+	debounceTimeMs: number,
+): useDebouncedFunctionReturn<Args> {
+	const timeoutIdRef = useRef<number | null>(null);
+	const cancelDebounce = useCallback(() => {
+		if (timeoutIdRef.current !== null) {
+			window.clearTimeout(timeoutIdRef.current);
+		}
+
+		timeoutIdRef.current = null;
+	}, []);
+
+	const debounceTimeRef = useRef(debounceTimeMs);
+	useEffect(() => {
+		cancelDebounce();
+		debounceTimeRef.current = debounceTimeMs;
+	}, [cancelDebounce, debounceTimeMs]);
+
+	const callbackRef = useRef(callback);
+	useEffect(() => {
+		callbackRef.current = callback;
+	}, [callback]);
+
+	// Returned-out function will always be synchronous, even if the callback arg
+	// is async. Seemed dicey to try awaiting a genericized operation that can and
+	// will likely be canceled repeatedly
+	const debounced = useCallback(
+		(...args: Args): void => {
+			cancelDebounce();
+
+			timeoutIdRef.current = window.setTimeout(
+				() => void callbackRef.current(...args),
+				debounceTimeRef.current,
+			);
+		},
+		[cancelDebounce],
+	);
+
+	return { debounced, cancelDebounce } as const;
+}
+
+/**
+ * Takes any value, and returns out a debounced version of it.
+ */
+export function useDebouncedValue<T = unknown>(
+	value: T,
+	debounceTimeMs: number,
+): T {
+	const [debouncedValue, setDebouncedValue] = useState(value);
+
+	useEffect(() => {
+		const timeoutId = window.setTimeout(() => {
+			setDebouncedValue(value);
+		}, debounceTimeMs);
+
+		return () => window.clearTimeout(timeoutId);
+	}, [value, debounceTimeMs]);
+
+	return debouncedValue;
+}

site/src/useWebSocket.ts

@@ -1,22 +1,14 @@
 // useWebSocket.ts
 import { useEffect, useRef, useState, useCallback } from "react";
 
-export function useWebSocket<T>(url: string, testdata: string, reconnectDelay = 3000) {
+export function useWebSocket<T>(url: string, testdata: string) {
   const [message, setMessage] = useState<T | null>(null);
   const [connectionStatus, setConnectionStatus] = useState<'connecting' | 'connected' | 'disconnected'>('connecting');
   const wsRef = useRef<WebSocket | null>(null);
-  const reconnectTimeoutRef = useRef<number | null>(null);
   const urlRef = useRef(url);
 
-  // Update the URL ref when the URL changes
-  useEffect(() => {
-    urlRef.current = url;
-  }, [url]);
-
-  // Memoize the connect function to avoid recreating it on every render
   const connectWebSocket = useCallback(() => {
     try {
-      // Always use the latest URL from the ref
       const ws = new WebSocket(urlRef.current);
       wsRef.current = ws;
       setConnectionStatus('connecting');
@@ -44,45 +36,42 @@ export function useWebSocket<T>(url: string, testdata: string, reconnectDelay =
       ws.onclose = (event) => {
         console.log(`WebSocket closed with code ${event.code}. Reason: ${event.reason}`);
         setConnectionStatus('disconnected');
-        
-        // Attempt to reconnect after delay
-        if (reconnectTimeoutRef.current) {
-          window.clearTimeout(reconnectTimeoutRef.current);
-        }
-        reconnectTimeoutRef.current = window.setTimeout(connectWebSocket, reconnectDelay);
       };
     } catch (error) {
       console.error("Failed to create WebSocket connection:", error);
       setConnectionStatus('disconnected');
-      
-      // Attempt to reconnect after delay
-      if (reconnectTimeoutRef.current) {
-        window.clearTimeout(reconnectTimeoutRef.current);
-      }
-      reconnectTimeoutRef.current = window.setTimeout(connectWebSocket, reconnectDelay);
     }
-  }, [reconnectDelay]); // Only depends on reconnectDelay, not url
+  }, []);
 
   useEffect(() => {
     if (!testdata) {
       return;
     }
-    // Close any existing connection when the URL changes
+
+    setMessage(null);
+    setConnectionStatus('connecting');
+    
+    // Create new connection after a small delay to ensure cleanup completes
+    const createConnection = () => {
+      urlRef.current = url;
+      connectWebSocket();
+    };
+
     if (wsRef.current) {
       wsRef.current.close();
+      wsRef.current = null;
     }
 
-    connectWebSocket();
+    const timeoutId = setTimeout(createConnection, 100);
 
     return () => {
+      clearTimeout(timeoutId);
       if (wsRef.current) {
         wsRef.current.close();
-      }
-      if (reconnectTimeoutRef.current) {
-        window.clearTimeout(reconnectTimeoutRef.current);
+        wsRef.current = null;
       }
     };
-  }, [url, testdata, connectWebSocket]); // Reconnect when URL changes
+  }, [testdata, connectWebSocket]); // Remove url from dependencies
 
   const sendMessage = (data: unknown) => {
     if (wsRef.current && wsRef.current.readyState === WebSocket.OPEN) {