Batch logs per frame render

Author: EhabY

packages/tasks/src/hooks/useWorkspaceLogs.ts

@@ -2,16 +2,34 @@ import { useEffect, useState } from "react";
 
 import { useTasksApi } from "./useTasksApi";
 
+/**
+ * Subscribes to workspace log lines pushed from the extension.
+ * Batches updates per animation frame to avoid excessive re-renders
+ * when many lines arrive in quick succession.
+ */
 export function useWorkspaceLogs(): string[] {
 	const { onWorkspaceLogsAppend, closeWorkspaceLogs } = useTasksApi();
 	const [lines, setLines] = useState<string[]>([]);
 
 	useEffect(() => {
+		let pending: string[] = [];
+		let frame = 0;
+
 		const unsubscribe = onWorkspaceLogsAppend((newLines) => {
-			setLines((prev) => [...prev, ...newLines]);
+			pending.push(...newLines);
+			if (frame === 0) {
+				frame = requestAnimationFrame(() => {
+					const batch = pending;
+					pending = [];
+					frame = 0;
+					setLines((prev) => prev.concat(batch));
+				});
+			}
 		});
+
 		return () => {
 			unsubscribe();
+			cancelAnimationFrame(frame);
 			closeWorkspaceLogs();
 		};
 	}, [closeWorkspaceLogs, onWorkspaceLogsAppend]);

test/webview/tasks/useWorkspaceLogs.test.ts

@@ -1,5 +1,5 @@
 import { act, renderHook } from "@testing-library/react";
-import { describe, expect, it, vi } from "vitest";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 
 import { TasksApi } from "@repo/shared";
 import { useWorkspaceLogs } from "@repo/tasks/hooks/useWorkspaceLogs";
@@ -33,6 +33,8 @@ function renderLogs() {
 						},
 					}),
 				);
+				// Flush the requestAnimationFrame batch used by useWorkspaceLogs.
+				vi.runAllTimers();
 			});
 		},
 		unmount() {
@@ -43,6 +45,9 @@ function renderLogs() {
 }
 
 describe("useWorkspaceLogs", () => {
+	beforeEach(() => vi.useFakeTimers());
+	afterEach(() => vi.useRealTimers());
+
 	it("returns empty array initially", () => {
 		const h = renderLogs();
 		expect(h.lines).toEqual([]);