fix(hooks): prevent race condition in useWithRetry after unmount

Add mountedRef to track component mount state and prevent: - setState calls after component unmount - Scheduling new retry timeouts when async operations complete after unmount This fixes a memory leak where in-flight async operations could schedule new retries even after the component was unmounted. Changes: - Add mountedRef.current checks before all setState calls - Add mountedRef.current checks before scheduling timeouts - Set mountedRef.current = false in cleanup - Add test to verify fix prevents retries after unmount 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
coder · BrunoQuaresma · Jul 3, 2025 · Jul 1, 2025 · Jul 1, 2025 · Jul 1, 2025
commit 7b14acda642a73ba3a8d382046057e239dd1c375
@@ -256,4 +256,38 @@ describe("useWithRetry", () => {
 		// Function should not have been called again
 		expect(mockFn).toHaveBeenCalledTimes(1);
 	});
+
+	it("should prevent scheduling retries when function completes after unmount", async () => {
+		let rejectPromise: (error: Error) => void;
+		const promise = new Promise<void>((_, reject) => {
+			rejectPromise = reject;
+		});
+		mockFn.mockReturnValue(promise);
+
+		const { result, unmount } = renderHook(() => useWithRetry(mockFn));
+
+		// Start the call - this will make the function in-flight
+		act(() => {
+			result.current.call();
+		});
+
+		expect(result.current.isLoading).toBe(true);
+
+		// Unmount while function is still in-flight
+		unmount();
+
+		// Function completes with error after unmount
+		await act(async () => {
+			rejectPromise!(new Error("Failed after unmount"));
+			await promise.catch(() => {}); // Suppress unhandled rejection
+		});
+
+		// Advance time to ensure no retry timers were scheduled
+		await act(async () => {
+			jest.advanceTimersByTime(5000);
+		});
+
+		// Function should only have been called once (no retries after unmount)
+		expect(mockFn).toHaveBeenCalledTimes(1);
+	});
 });
@@ -29,6 +29,7 @@ export function useWithRetry(fn: () => Promise<void>): UseWithRetryResult {
 	});
 
 	const timeoutRef = useRef<number | null>(null);
+	const mountedRef = useRef(true);
 
 	const clearTimeout = useCallback(() => {
 		if (timeoutRef.current) {
@@ -43,15 +44,23 @@ export function useWithRetry(fn: () => Promise<void>): UseWithRetryResult {
 		clearTimeout();
 
 		const executeAttempt = async (attempt: number): Promise<void> => {
+			if (!mountedRef.current) {
+				return;
+			}
 			setState({
 				isLoading: true,
 				nextRetryAt: undefined,
 			});
 
 			try {
 				await stableFn();
-				setState({ isLoading: false, nextRetryAt: undefined });
+				if (mountedRef.current) {
+					setState({ isLoading: false, nextRetryAt: undefined });
+				}
 			} catch (error) {
+				if (!mountedRef.current) {
+					return;
+				}
 				const delayMs = Math.min(
 					DELAY_MS * MULTIPLIER ** attempt,
 					MAX_DELAY_MS,
@@ -63,6 +72,9 @@ export function useWithRetry(fn: () => Promise<void>): UseWithRetryResult {
 				});
 
 				timeoutRef.current = window.setTimeout(() => {
+					if (!mountedRef.current) {
+						return;
+					}
 					setState({
 						isLoading: false,
 						nextRetryAt: undefined,
@@ -77,6 +89,7 @@ export function useWithRetry(fn: () => Promise<void>): UseWithRetryResult {
 
 	useEffect(() => {
 		return () => {
+			mountedRef.current = false;
 			clearTimeout();
 		};
 	}, [clearTimeout]);