fix: Improve useRetry hook logic

- Fix startRetrying to immediately perform first retry - Adjust retry scheduling conditions - Fix delay calculation for exponential backoff Still debugging test failures
coder · BrunoQuaresma · Jul 3, 2025 · Jul 1, 2025 · Jul 1, 2025 · Jul 1, 2025
commit c10349b25d2fc016d870b13f58d70e1d7f51cba9
diff --git a/site/src/hooks/useRetry.ts b/site/src/hooks/useRetry.ts
@@ -63,7 +63,9 @@ export function useRetry(options: UseRetryOptions): UseRetryReturn {
 	const [isRetrying, setIsRetrying] = useState(false);
 	const [currentDelay, setCurrentDelay] = useState<number | null>(null);
 	const [attemptCount, setAttemptCount] = useState(0);
-	const [timeUntilNextRetry, setTimeUntilNextRetry] = useState<number | null>(null);
+	const [timeUntilNextRetry, setTimeUntilNextRetry] = useState<number | null>(
+		null,
+	);
 	const [isManualRetry, setIsManualRetry] = useState(false);
 
 	const timeoutRef = useRef<number | null>(null);
@@ -84,10 +86,13 @@ export function useRetry(options: UseRetryOptions): UseRetryReturn {
 		startTimeRef.current = null;
 	}, []);
 
-	const calculateDelay = useCallback((attempt: number): number => {
-		const delay = initialDelay * Math.pow(multiplier, attempt);
-		return Math.min(delay, maxDelay);
-	}, [initialDelay, multiplier, maxDelay]);
+	const calculateDelay = useCallback(
+		(attempt: number): number => {
+			const delay = initialDelay * multiplier ** attempt;
+			return Math.min(delay, maxDelay);
+		},
+		[initialDelay, multiplier, maxDelay],
+	);
 
 	const performRetry = useCallback(async () => {
 		setIsRetrying(true);
@@ -103,47 +108,56 @@ export function useRetry(options: UseRetryOptions): UseRetryReturn {
 			setIsManualRetry(false);
 		} catch (error) {
 			// If retry fails, schedule next attempt (if not manual and under max attempts)
-			setAttemptCount(prev => prev + 1);
+			setAttemptCount((prev) => prev + 1);
 			setIsRetrying(false);
 			setIsManualRetry(false);
 		}
 	}, [onRetryEvent, clearTimers]);
 
-	const scheduleNextRetry = useCallback((attempt: number) => {
-		if (attempt >= maxAttempts) {
-			return;
-		}
+	const scheduleNextRetry = useCallback(
+		(attempt: number) => {
+			if (attempt >= maxAttempts) {
+				return;
+			}
 
-		const delay = calculateDelay(attempt);
-		setCurrentDelay(delay);
-		setTimeUntilNextRetry(delay);
-		startTimeRef.current = Date.now();
-
-		// Start countdown timer
-		countdownRef.current = setInterval(() => {
-			if (startTimeRef.current) {
-				const elapsed = Date.now() - startTimeRef.current;
-				const remaining = Math.max(0, delay - elapsed);
-				setTimeUntilNextRetry(remaining);
-
-				if (remaining <= 0) {
-					if (countdownRef.current) {
-						clearInterval(countdownRef.current);
-						countdownRef.current = null;
+			// Calculate delay based on attempt - 2 (so second attempt gets initialDelay)
+		const delay = calculateDelay(Math.max(0, attempt - 2));
+			setCurrentDelay(delay);
+			setTimeUntilNextRetry(delay);
+			startTimeRef.current = Date.now();
+
+			// Start countdown timer
+			countdownRef.current = setInterval(() => {
+				if (startTimeRef.current) {
+					const elapsed = Date.now() - startTimeRef.current;
+					const remaining = Math.max(0, delay - elapsed);
+					setTimeUntilNextRetry(remaining);
+
+					if (remaining <= 0) {
+						if (countdownRef.current) {
+							clearInterval(countdownRef.current);
+							countdownRef.current = null;
+						}
 					}
 				}
-			}
-		}, 100); // Update every 100ms for smooth countdown
+			}, 100); // Update every 100ms for smooth countdown
 
-		// Schedule the actual retry
-		timeoutRef.current = setTimeout(() => {
-			performRetry();
-		}, delay);
-	}, [calculateDelay, maxAttempts, performRetry]);
+			// Schedule the actual retry
+			timeoutRef.current = setTimeout(() => {
+				performRetry();
+			}, delay);
+		},
+		[calculateDelay, maxAttempts, performRetry],
+	);
 
 	// Effect to schedule next retry after a failed attempt
 	useEffect(() => {
-		if (!isRetrying && !isManualRetry && attemptCount > 0 && attemptCount < maxAttempts) {
+		if (
+			!isRetrying &&
+			!isManualRetry &&
+			attemptCount > 1 &&
+			attemptCount <= maxAttempts
+		) {
 			scheduleNextRetry(attemptCount);
 		}
 	}, [attemptCount, isRetrying, isManualRetry, maxAttempts, scheduleNextRetry]);
@@ -157,8 +171,10 @@ export function useRetry(options: UseRetryOptions): UseRetryReturn {
 	}, [clearTimers, performRetry]);
 
 	const startRetrying = useCallback(() => {
-		setAttemptCount(1); // This will trigger the first retry attempt
-	}, []);
+		// Immediately perform the first retry attempt
+		setAttemptCount(1);
+		performRetry();
+	}, [performRetry]);
 
 	const stopRetrying = useCallback(() => {
 		clearTimers();