perf(renderer): wrap heavy view components in React.memo

TeamDetailView (3166L), TeamListView (1180L), DateGroupedSessions (1117L), and MarkdownViewer (1198L) were re-rendering on every parent render cycle. Wrapping them in memo() prevents cascading re-renders when their props and store subscriptions have not changed, targeting VSCode-level UI responsiveness.
2026-05-02 20:29:19 +05:00 · 2026-05-02 20:29:19 +05:00 · f764af17d8
commit f764af17d8
parent 7609c548c5
4 changed files with 2344 additions and 2314 deletions
--- a/src/renderer/components/chat/viewers/MarkdownViewer.tsx
+++ b/src/renderer/components/chat/viewers/MarkdownViewer.tsx
@ -946,7 +946,8 @@ export const CompactMarkdownPreview: React.FC<CompactMarkdownPreviewProps> = Rea
  }
 );

-export const MarkdownViewer: React.FC<MarkdownViewerProps> = ({
+export const MarkdownViewer: React.FC<MarkdownViewerProps> = React.memo(
+  ({
    content,
    maxHeight = 'max-h-96',
    className = '',
@ -1062,8 +1063,8 @@ export const MarkdownViewer: React.FC<MarkdownViewerProps> = ({

          {isTooLarge && (
            <div className="px-3 pb-2 text-[11px]" style={{ color: COLOR_TEXT_MUTED }}>
-            Content is very large ({content.length.toLocaleString()} chars). Showing raw preview to
-            keep the UI responsive.
+              Content is very large ({content.length.toLocaleString()} chars). Showing raw preview
+              to keep the UI responsive.
            </div>
          )}

@ -1195,4 +1196,5 @@ export const MarkdownViewer: React.FC<MarkdownViewerProps> = ({
        </div>
      </div>
    );
-};
+  }
+);
--- a/src/renderer/components/sidebar/DateGroupedSessions.tsx
+++ b/src/renderer/components/sidebar/DateGroupedSessions.tsx
@ -4,7 +4,7 @@
 * Supports multi-select with bulk actions and hidden session filtering.
 */

-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';

 import { recordRecentProjectOpenPaths } from '@features/recent-projects/renderer';
@ -184,7 +184,7 @@ function matchesSessionSearch(session: Session, query: string): boolean {
  return haystack.includes(query);
 }

-export const DateGroupedSessions = (): React.JSX.Element => {
+export const DateGroupedSessions = memo((): React.JSX.Element => {
  const {
    sessions,
    selectedSessionId,
@ -1114,4 +1114,4 @@ export const DateGroupedSessions = (): React.JSX.Element => {
      </div>
    </div>
  );
-};
+});
--- a/src/renderer/components/team/TeamDetailView.tsx
+++ b/src/renderer/components/team/TeamDetailView.tsx
@ -947,10 +947,8 @@ const TeamMemberDetailDialogBridge = memo(function TeamMemberDetailDialogBridge(
  );
 });

-export const TeamDetailView = ({
-  teamName,
-  isPaneFocused = false,
-}: TeamDetailViewProps): React.JSX.Element => {
+export const TeamDetailView = memo(
+  ({ teamName, isPaneFocused = false }: TeamDetailViewProps): React.JSX.Element => {
    const { isLight } = useTheme();
    const [requestChangesTaskId, setRequestChangesTaskId] = useState<string | null>(null);
    const [selectedTask, setSelectedTask] = useState<TeamTaskWithKanban | null>(null);
@ -959,8 +957,8 @@ export const TeamDetailView = ({
      initialTab?: MemberDetailTab;
      initialActivityFilter?: MemberActivityFilter;
    } | null>(null);
-  const [pendingRepliesByMember, setPendingRepliesByMember] = useState<Record<string, number>>(() =>
-    getTeamPendingRepliesState(teamName)
+    const [pendingRepliesByMember, setPendingRepliesByMember] = useState<Record<string, number>>(
+      () => getTeamPendingRepliesState(teamName)
    );
    const [createTaskDialog, setCreateTaskDialog] = useState<CreateTaskDialogState>({
      open: false,
@ -1192,7 +1190,9 @@ export const TeamDetailView = ({
    const [stoppingTeam, setStoppingTeam] = useState(false);
    const [trashOpen, setTrashOpen] = useState(false);
    const [sendDialogRecipient, setSendDialogRecipient] = useState<string | undefined>(undefined);
-  const [sendDialogDefaultText, setSendDialogDefaultText] = useState<string | undefined>(undefined);
+    const [sendDialogDefaultText, setSendDialogDefaultText] = useState<string | undefined>(
+      undefined
+    );
    const [sendDialogDefaultChip, setSendDialogDefaultChip] = useState<InlineChip | undefined>(
      undefined
    );
@ -1353,7 +1353,8 @@ export const TeamDetailView = ({
        maxWidth: 600,
        side: 'left',
      });
-  const { isResizing: isLogsPanelResizing, handleProps: logsPanelHandleProps } = useResizablePanel({
+    const { isResizing: isLogsPanelResizing, handleProps: logsPanelHandleProps } =
+      useResizablePanel({
        height: sidebarLogsHeight,
        onHeightChange: setSidebarLogsHeight,
        minHeight: 120,
@ -1703,11 +1704,17 @@ export const TeamDetailView = ({
    }, [activeMembers, data?.config.members, launchParams?.providerId]);
    const shouldShowLeadContextUi = canShowLeadContextUi(leadProviderId);

-  const taskMap = useMemo(() => new Map((data?.tasks ?? []).map((t) => [t.id, t])), [data?.tasks]);
+    const taskMap = useMemo(
+      () => new Map((data?.tasks ?? []).map((t) => [t.id, t])),
+      [data?.tasks]
+    );
    const taskMapRef = useRef(taskMap);
    taskMapRef.current = taskMap;

-  const memberTaskCounts = useMemo(() => buildTaskCountsByOwner(data?.tasks ?? []), [data?.tasks]);
+    const memberTaskCounts = useMemo(
+      () => buildTaskCountsByOwner(data?.tasks ?? []),
+      [data?.tasks]
+    );

    const openCreateTaskDialog = useCallback(
      (subject = '', description = '', owner = '', startImmediately?: boolean): void => {
@ -2011,7 +2018,13 @@ export const TeamDetailView = ({
            startImmediately,
          });

-        if (prompt && owner && data?.isAlive && !isTeamProvisioning && startImmediately !== false) {
+          if (
+            prompt &&
+            owner &&
+            data?.isAlive &&
+            !isTeamProvisioning &&
+            startImmediately !== false
+          ) {
            const msg = `New task assigned to ${owner}: "${subject}". Instructions:\n${prompt}`;
            try {
              await api.teams.processSend(teamName, msg);
@ -2351,7 +2364,10 @@ export const TeamDetailView = ({
                    <div className="flex min-w-0 flex-1 flex-wrap items-center gap-x-3 gap-y-0.5">
                      {data.config.projectPath && (
                        <span className="flex items-center gap-1 text-[11px] text-[var(--color-text-secondary)]">
-                        <FolderOpen size={11} className="shrink-0 text-[var(--color-text-muted)]" />
+                          <FolderOpen
+                            size={11}
+                            className="shrink-0 text-[var(--color-text-muted)]"
+                          />
                          <Tooltip>
                            <TooltipTrigger asChild>
                              <span className="max-w-60 truncate font-mono">
@ -2386,7 +2402,10 @@ export const TeamDetailView = ({
                          className="flex items-center gap-1 text-[11px] text-[var(--color-text-secondary)]"
                          title={leadBranch}
                        >
-                        <GitBranch size={11} className="shrink-0 text-[var(--color-text-muted)]" />
+                          <GitBranch
+                            size={11}
+                            className="shrink-0 text-[var(--color-text-muted)]"
+                          />
                          <span className="max-w-32 truncate">{leadBranch}</span>
                        </span>
                      )}
@ -2415,7 +2434,9 @@ export const TeamDetailView = ({
                  </div>
                  {(() => {
                    const currentPath = data.config.projectPath;
-                  const history = data.config.projectPathHistory?.filter((p) => p !== currentPath);
+                    const history = data.config.projectPathHistory?.filter(
+                      (p) => p !== currentPath
+                    );
                    if (!history || history.length === 0) return null;
                    return (
                      <div
@ -2508,7 +2529,9 @@ export const TeamDetailView = ({
                    sessionsError={sessionsError}
                    leadSessionId={data.config.leadSessionId}
                    selectedSessionId={kanbanFilter.sessionId}
-                  onSelectSession={(id) => setKanbanFilter((prev) => ({ ...prev, sessionId: id }))}
+                    onSelectSession={(id) =>
+                      setKanbanFilter((prev) => ({ ...prev, sessionId: id }))
+                    }
                    projectPath={data.config.projectPath}
                  />
                </CollapsibleTeamSection>
@ -2910,7 +2933,11 @@ export const TeamDetailView = ({
                      </DialogDescription>
                    </DialogHeader>
                    <DialogFooter>
-                    <Button variant="ghost" size="sm" onClick={() => setRemoveMemberConfirm(null)}>
+                      <Button
+                        variant="ghost"
+                        size="sm"
+                        onClick={() => setRemoveMemberConfirm(null)}
+                      >
                        Cancel
                      </Button>
                      <Button
@ -2934,8 +2961,8 @@ export const TeamDetailView = ({
                    <DialogHeader>
                      <DialogTitle>Delete team</DialogTitle>
                      <DialogDescription>
-                      Delete team &ldquo;{data.config.name}&rdquo;? This action is irreversible. All
-                      team data and tasks will be deleted.
+                        Delete team &ldquo;{data.config.name}&rdquo;? This action is irreversible.
+                        All team data and tasks will be deleted.
                      </DialogDescription>
                    </DialogHeader>
                    <DialogFooter>
@ -3163,4 +3190,5 @@ export const TeamDetailView = ({
        {renderBody()}
      </>
    );
-};
+  }
+);
--- a/src/renderer/components/team/TeamListView.tsx
+++ b/src/renderer/components/team/TeamListView.tsx
@ -1,4 +1,4 @@
-import { useCallback, useEffect, useMemo, useState } from 'react';
+import { memo, useCallback, useEffect, useMemo, useState } from 'react';

 import { recordRecentProjectOpenPaths } from '@features/recent-projects/renderer';
 import { api, isElectronMode } from '@renderer/api';
@ -233,7 +233,7 @@ const StatusBadge = ({ status }: { status: TeamStatus }): React.JSX.Element => {
  }
 };

-export const TeamListView = (): React.JSX.Element => {
+export const TeamListView = memo((): React.JSX.Element => {
  const { isLight } = useTheme();
  const electronMode = isElectronMode();
  const [showCreateDialog, setShowCreateDialog] = useState(false);
@ -1177,4 +1177,4 @@ export const TeamListView = (): React.JSX.Element => {
      </div>
    </TooltipProvider>
  );
-};
+});