fix(desktop): optimize terminal rendering to prevent re-render loops by Kitenite · Pull Request #670 · superset-sh/superset

Kitenite · 2026-01-08T21:12:00Z

Summary

Wrap Terminal and TabPane components in React.memo to prevent cascading re-renders from parent components
Use granular Zustand selectors in Terminal to subscribe only to specific pane properties (initialCommands, initialCwd, tabId) instead of the full pane object
Break circular dependency where Terminal updates pane.cwd → store notifies Terminal (which subscribed to pane) → Terminal re-renders
Use stable callback pattern for tRPC subscription to prevent subscription re-initialization on every render

Problem

When typing in the terminal, there were dropped frames and noticeable slowness. Investigation revealed:

Terminal subscribed to the full pane object from Zustand store
Terminal updates pane.cwd via updatePaneCwd when parsing OSC-7 sequences
This triggered store notifications, causing Terminal to re-render
The re-render created new callback references, potentially reinitializing the tRPC subscription
This created a circular re-render loop causing poor frame rates

Test plan

Open the desktop app and navigate to a terminal
Type rapidly in the terminal
Verify smooth rendering without dropped frames
Verify cwd updates still work correctly (directory navigator shows current path)
Verify terminal focus/blur behavior works correctly

🤖 Generated with Claude Code

Summary by CodeRabbit

Release Notes

Refactor
- Enhanced rendering performance in tab and terminal components through strategic component memoization to reduce unnecessary re-renders and improve overall UI responsiveness.
- Optimized terminal state management with granular data selectors and stabilized callback handling for better performance consistency.
- Refined workspace tab pane visibility logic for more efficient tab content management.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

- Wrap Terminal and TabPane components in React.memo to prevent cascading re-renders - Use granular Zustand selectors in Terminal to avoid subscribing to the full pane object - Break circular dependency where Terminal updates cwd → store notifies → Terminal re-renders - Use stable callback pattern for tRPC subscription to prevent re-initialization This fixes dropped frames and slowness when typing in the terminal UI. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

coderabbitai · 2026-01-08T21:12:11Z

📝 Walkthrough

Walkthrough

React.memo memoization is applied to TabPane and Terminal components for render optimization. The TabView pane derivation logic is refactored to filter panes directly from a global store instead of deriving them from layout structure, decoupling pane visibility from layout-based extraction.

Changes

Cohort / File(s)	Summary
Component Memoization `apps/desktop/src/renderer/screens/main/components/WorkspaceView/ContentView/TabsContent/TabView/TabPane.tsx`	Wraps exported TabPane component with React.memo to prevent unnecessary re-renders. Function declaration converted to memoized const.
Pane Derivation Logic `apps/desktop/src/renderer/screens/main/components/WorkspaceView/ContentView/TabsContent/TabView/index.tsx`	Refactors tab-related panes derivation to filter from global panes store by tabId instead of extracting pane IDs from layout structure. Moves allPanes retrieval and replaces layout-driven logic with direct store-based filtering.
Terminal Component Refactor `apps/desktop/src/renderer/screens/main/components/WorkspaceView/ContentView/TabsContent/Terminal/Terminal.tsx`	Applies memoization to Terminal. Introduces granular state selectors for pane metadata (paneInitialCommands, paneInitialCwd, parentTabId). Stabilizes subscription callbacks using ref-backed handler indirection. Refactors focus tracking to use parentTabId and updates workspaceCwd/terminalLinkBehavior data fetching with separate queries.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Possibly related PRs

fix (desktop): make app go brr #659 — Modifies the same desktop UI components (TabPane, Terminal, TabView) with matching refactors including granular selectors, prop removal, and memoization patterns
feat(desktop): add userTitle field for user-renamed tabs #289 — Modifies Terminal.tsx with overlapping changes to memoization, parentTabId/focus handling, and tab-title-related logic
fix(desktop): autofocus new terminal #262 — Modifies Terminal.tsx with related changes to terminal focus handling and ref-based focus state management

Poem

🐰 A dash of memo, a sprinkle of memoize—
Render optimization's our latest prize!
Panes now flow from stores, not layouts old,
Terminal subscriptions kept steady and bold.
Performance improves with each careful tweak! ✨

🚥 Pre-merge checks | ✅ 1 | ❌ 2

❌ Failed checks (1 warning, 1 inconclusive)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.
Description check	❓ Inconclusive	The PR description is comprehensive and well-structured, covering the summary of changes, the problem being solved, and a test plan. However, it does not follow the required template structure with proper section headings like 'Related Issues', 'Type of Change', or 'Testing' as specified in the repository template.	Reformat the description to match the required template structure, including sections for Related Issues, Type of Change, and Testing with appropriate checkboxes.

✅ Passed checks (1 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly and specifically describes the main change: optimizing terminal rendering to prevent re-render loops, which matches the core objective of the PR.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

📝 Generate docstrings

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

coderabbitai

Actionable comments posted: 0

🧹 Nitpick comments (1)

apps/desktop/src/renderer/screens/main/components/WorkspaceView/ContentView/TabsContent/TabView/index.tsx (1)
47-55: Subscribing to all panes may still cause unnecessary re-renders.

The selector useTabsStore((s) => s.panes) subscribes to the entire panes object. Any pane update (e.g., cwd changes from any terminal) will produce a new allPanes reference and trigger a re-render of TabView, even if the update is for a pane in a different tab.

Consider using a more granular selector that only returns panes for this specific tab, or using Zustand's shallow equality check:
Option 1: Use shallow comparison
+import { shallow } from "zustand/shallow";
+
 // Get all panes belonging to this tab
-const allPanes = useTabsStore((s) => s.panes);
-const tabPanes = useMemo(
-  () =>
-    Object.fromEntries(
-      Object.entries(allPanes).filter(([_, pane]) => pane.tabId === tab.id),
-    ),
-  [allPanes, tab.id],
-);
+const tabPanes = useTabsStore(
+  (s) =>
+    Object.fromEntries(
+      Object.entries(s.panes).filter(([_, pane]) => pane.tabId === tab.id),
+    ),
+  shallow,
+);
This ensures TabView only re-renders when its own tab's panes actually change (by shallow-comparing the derived object's entries).

📜 Review details

Configuration used: defaults

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 0dd7368 and c209001.

📒 Files selected for processing (3)

apps/desktop/src/renderer/screens/main/components/WorkspaceView/ContentView/TabsContent/TabView/TabPane.tsx
apps/desktop/src/renderer/screens/main/components/WorkspaceView/ContentView/TabsContent/TabView/index.tsx
apps/desktop/src/renderer/screens/main/components/WorkspaceView/ContentView/TabsContent/Terminal/Terminal.tsx

🧰 Additional context used

📓 Path-based instructions (6)

apps/desktop/**/*.{ts,tsx}

📄 CodeRabbit inference engine (apps/desktop/AGENTS.md)

apps/desktop/**/*.{ts,tsx}: For Electron interprocess communication, ALWAYS use tRPC as defined in src/lib/trpc
Use alias as defined in tsconfig.json when possible
Prefer zustand for state management if it makes sense. Do not use effect unless absolutely necessary.
For tRPC subscriptions with trpc-electron, ALWAYS use the observable pattern from @trpc/server/observable instead of async generators, as the library explicitly checks isObservable(result) and throws an error otherwise

Files:

apps/desktop/src/renderer/screens/main/components/WorkspaceView/ContentView/TabsContent/TabView/TabPane.tsx
apps/desktop/src/renderer/screens/main/components/WorkspaceView/ContentView/TabsContent/TabView/index.tsx
apps/desktop/src/renderer/screens/main/components/WorkspaceView/ContentView/TabsContent/Terminal/Terminal.tsx

**/*.{ts,tsx}