backup

frontend/src/hooks/usePolledData.ts

@@ -77,11 +77,34 @@ export function usePolledData<TResponse, TData>(
     pauseWhenHidden = false,
   } = options;
 
+  // Stabilize fetcher/selector/onSuccess references so that useFetchData's
+  // refresh callback (and the useEffect that calls it) don't re-trigger on
+  // every render when callers pass inline functions.
+  const fetcherRef = useRef(fetcher);
+  fetcherRef.current = fetcher;
+  const selectorRef = useRef(selector);
+  selectorRef.current = selector;
+  const onSuccessRef = useRef(onSuccess);
+  onSuccessRef.current = onSuccess;
+
+  const stableFetcher = useCallback(
+    (signal: AbortSignal) => fetcherRef.current(signal),
+    [],
+  );
+  const stableSelector = useCallback(
+    (response: TResponse) => selectorRef.current(response),
+    [],
+  );
+  const stableOnSuccess = useCallback(
+    (response: TResponse) => onSuccessRef.current?.(response),
+    [],
+  );
+
   const { data, loading, error, refresh } = useFetchData({
-    fetcher,
-    selector,
+    fetcher: stableFetcher,
+    selector: stableSelector,
     errorMessage,
-    onSuccess,
+    onSuccess: onSuccessRef.current ? stableOnSuccess : undefined,
     initialData,
   });
 
@@ -151,15 +174,10 @@ export function usePolledData<TResponse, TData>(
       return;
     }
 
-    // Record when polling starts and schedule first poll immediately
+    // Record when polling starts. The initial fetch is handled by useFetchData's
+    // mount effect, so we just mark the start time and let the loading-completion
+    // effect (above) schedule the first poll after the initial fetch finishes.
     pollStartTimeRef.current = performance.now();
-    const id = window.setTimeout((): void => {
-      if (cancelledRef.current) return;
-      pollStartTimeRef.current = performance.now();
-      refreshRef.current?.();
-    }, 0);
-
-    timeoutIdRef.current = id;
 
     return (): void => {
       cancelledRef.current = true;