Restore lost useMemo calls in ChatView and fix threadActivities referential stability

Revert bare function calls / IIFEs back to useMemo for: modelOptions, workLogEntries, latestTurnHasToolActivity, pendingApprovals, timelineEntries, revertTurnCountByUserMessageId, completionSummary, and completionDividerBeforeEntryId. Add EMPTY_ACTIVITIES module-level constant so the ?? [] fallback doesn't create a new array reference every render, which was defeating memoization.

Julius Marminge committed 8 months ago

Commit fd4ff8c1 parent 1bcfbdf1 file · +38 −16Browse files

Unified · Split

apps/web/src/components/ChatView.tsx+38−16

   type TurnId,
   normalizeModelSlug,
   resolveModelSlug,
+  OrchestrationThreadActivity,
 } from "@t3tools/contracts";
 import { memo, useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 const IMAGE_SIZE_LIMIT_LABEL = `${Math.round(PROVIDER_SEND_TURN_MAX_IMAGE_BYTES / (1024 * 1024))}MB`;
 const IMAGE_ONLY_BOOTSTRAP_PROMPT =
   "[User attached one or more images without additional text. Respond using the conversation context and the attached image(s).]";
+const EMPTY_ACTIVITIES: OrchestrationThreadActivity[] = [];
 const EMPTY_KEYBINDINGS: ResolvedKeybindingsConfig = [];
 const EMPTY_PROJECT_ENTRIES: ProjectEntry[] = [];
 const COMPOSER_PATH_QUERY_DEBOUNCE_MS = 120;
   );
   const selectedModel = resolveModelSlug(composerDraft.model ?? baseThreadModel);
   const selectedEffort = composerDraft.effort ?? DEFAULT_REASONING;
-  const modelOptions = getAppModelOptions(settings.customCodexModels, selectedModel);
+  const modelOptions = useMemo(
+    () => getAppModelOptions(settings.customCodexModels, selectedModel),
+    [selectedModel, settings.customCodexModels],
+  );
   const phase = derivePhase(activeThread?.session ?? null);
   const isSendBusy = sendPhase !== "idle";
   const isPreparingWorktree = sendPhase === "preparing-worktree";
   const isWorking = phase === "running" || isSendBusy || isConnecting || isRevertingCheckpoint;
   const nowIso = new Date(nowTick).toISOString();
-  const threadActivities = activeThread?.activities ?? [];
+  const threadActivities = activeThread?.activities ?? EMPTY_ACTIVITIES;
-  const workLogEntries = deriveWorkLogEntries(
+  const workLogEntries = useMemo(
-    threadActivities,
+    () => deriveWorkLogEntries(threadActivities, activeLatestTurn?.turnId ?? undefined),
-    activeLatestTurn?.turnId ?? undefined,
+    [activeLatestTurn?.turnId, threadActivities],
+  );
+  const latestTurnHasToolActivity = useMemo(
+    () => hasToolActivityForTurn(threadActivities, activeLatestTurn?.turnId),
+    [activeLatestTurn?.turnId, threadActivities],
   );
-  const latestTurnHasToolActivity = hasToolActivityForTurn(
+  const pendingApprovals = useMemo(
-    threadActivities,
+    () => derivePendingApprovals(threadActivities),
-    activeLatestTurn?.turnId,
+    [threadActivities],
   );
-  const pendingApprovals = derivePendingApprovals(threadActivities);
   useEffect(() => {
     attachmentPreviewHandoffByMessageIdRef.current = attachmentPreviewHandoffByMessageId;
   }, [attachmentPreviewHandoffByMessageId]);
     }
     return [...serverMessagesWithPreviewHandoff, ...pendingMessages];
   }, [serverMessages, attachmentPreviewHandoffByMessageId, optimisticUserMessages]);
-  const timelineEntries = deriveTimelineEntries(timelineMessages, workLogEntries);
+  const timelineEntries = useMemo(
+    () => deriveTimelineEntries(timelineMessages, workLogEntries),
+    [timelineMessages, workLogEntries],
+  );
   const { turnDiffSummaries, inferredCheckpointTurnCountByTurnId } =
     useTurnDiffSummaries(activeThread);
   const turnDiffSummaryByAssistantMessageId = useMemo(() => {
     }
     return byMessageId;
   }, [turnDiffSummaries]);
-  const revertTurnCountByUserMessageId = (() => {
+  const revertTurnCountByUserMessageId = useMemo(() => {
     const byUserMessageId = new Map<MessageId, number>();
     for (let index = 0; index < timelineEntries.length; index += 1) {
       const entry = timelineEntries[index];
     }
     return byUserMessageId;
-  })();
+  }, [inferredCheckpointTurnCountByTurnId, timelineEntries, turnDiffSummaryByAssistantMessageId]);
-  const completionSummary = (() => {
+  const completionSummary = useMemo(() => {
     if (!latestTurnSettled) return null;
     if (!activeLatestTurn?.startedAt) return null;
     if (!activeLatestTurn.completedAt) return null;
     const elapsed = formatElapsed(activeLatestTurn.startedAt, activeLatestTurn.completedAt);
     return elapsed ? `Worked for ${elapsed}` : null;
-  })();
+  }, [
-  const completionDividerBeforeEntryId = (() => {
+    activeLatestTurn?.completedAt,
+    activeLatestTurn?.startedAt,
+    latestTurnHasToolActivity,
+    latestTurnSettled,
+  ]);
+  const completionDividerBeforeEntryId = useMemo(() => {
     if (!latestTurnSettled) return null;
     if (!activeLatestTurn?.startedAt) return null;
     if (!activeLatestTurn.completedAt) return null;
       }
     }
     return inRangeMatch ?? fallbackMatch;
-  })();
+  }, [
+    activeLatestTurn?.completedAt,
+    activeLatestTurn?.startedAt,
+    completionSummary,
+    latestTurnSettled,
+    timelineEntries,
+  ]);
   const gitCwd = activeThread?.worktreePath ?? activeProject?.cwd ?? null;
   const composerTrigger = useMemo(
     () => detectComposerTrigger(prompt, composerCursor),

Restore lost useMemo calls in ChatView and fix threadActivities referential stability

Keyboard shortcuts

General

Issues and pull requests

Issues, pull requests and Inbox

Repository code