improvement(sidebar): memoize workflow/folder rows for faster tab navigation

[waleedlatif1]

Summary

• Switching between workspace tabs (Chat/Workflows/Knowledge/Tables/Files/Logs) re-rendered every workflow and folder row in the sidebar, because the rows — and the shared export hooks they call — subscribe to useParams, which re-renders on every navigation. React.memo alone can't stop that.
• Wrap WorkflowItem and FolderItem in React.memo. They were the only un-memoized leaf rows; every sibling row (SidebarNavItem, SidebarChatItem, FileFolderNodeItem) was already memoized.
• Decouple the rows from useParams: thread workspaceId as a stable prop from WorkflowList (matching the FileList convention), and expose the live active workflowId through a stable activeWorkflowIdRef on SidebarListContext, read only inside delete callbacks — never during render.
• Refactor the three shared export hooks (useExportWorkflow/useExportSelection/useExportFolder, used only by these two rows) to take workspaceId as a param instead of calling useParams internally.
• Stabilize handleWorkflowClick's identity via refs so the shared list context no longer changes identity on navigation.
• Lazy-init the drag-drop siblings Map ref.
• Net effect: on a tab switch, only the two rows whose active state flips re-render instead of the whole list.

Note: this optimizes tab switches. Clicking a specific workflow still fires selectOnly(), which mutates the selection Set the rows subscribe to, so those re-render regardless — pre-existing behavior, untouched here.

Type of Change

• Improvement (performance)

Testing

• tsc 0 errors, biome clean
• 52 sidebar tests pass (one pre-existing, unrelated postcss/tailwind test-env failure on fork-file-tree.test.ts — confirmed identical on clean origin/staging)
• Three independent adversarial audits confirmed zero regression: activeWorkflowIdRef.current is semantically equivalent to the old params.workflowId at delete time; memo is now genuinely effective (every route-hook subscription removed, all 7 context slots + props stable across tab nav); all export-hook call sites covered. Plus a 4-angle simplify pass (reuse/simplification/efficiency/altitude) — clean.

Checklist

• Code follows project style guidelines
• Self-reviewed my changes
• Tests added/updated and passing
• No new warnings introduced
• I confirm that I have read and agree to the terms outlined in the Contributor License Agreement (CLA)

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

1 Skipped Deployment

Project	Deployment	Actions	Updated (UTC)
docs	Skipped		Jul 5, 2026 4:19am

[cursor]

PR Summary

Low Risk
UI performance refactor with no auth or data-model changes; delete/export behavior still reads the current workflow id from a ref at callback time, matching prior useParams semantics.

Overview
Reduces sidebar re-renders on workspace tab switches by making WorkflowItem and FolderItem memoizable and stopping route-driven subscriptions inside each row.

WorkflowItem and FolderItem are wrapped in React.memo. workspaceId is passed from WorkflowList as a prop instead of each row calling useParams. The open workflow id is exposed as a stable activeWorkflowIdRef on SidebarListContext, read in delete/active checks at action time—not during render—so navigation does not invalidate every row.

handleWorkflowClick in useWorkflowSelection keeps a stable callback via refs for workflowIds and activeWorkflowId, so the list context value does not churn on every route change. Export hooks (useExportWorkflow, useExportSelection, useExportFolder) take workspaceId as an argument instead of useParams. Drag-drop sibling caching uses a lazily initialized Map ref with optional chaining on clear.

On tab navigation, only rows whose active highlight changes should re-render, not the full workflow/folder list.

^{Reviewed by Cursor Bugbot for commit ca6f169. Configure here.}

[greptile-apps]

Greptile Summary

This PR eliminates full-list re-renders when switching workspace tabs by wrapping WorkflowItem and FolderItem in React.memo and surgically removing every useParams subscription from the rows and their shared export hooks, decoupling them from route changes entirely.

• Memoization + route-hook decoupling: workspaceId is threaded as a stable prop from WorkflowList, useParams is removed from WorkflowItem, FolderItem, and the three export hooks (useExportWorkflow, useExportSelection, useExportFolder), and a stable activeWorkflowIdRef is exposed on SidebarListContext so delete callbacks read the live workflow ID at action time without subscribing during render.
• Stable handleWorkflowClick identity: Refs (workflowIdsRef, activeWorkflowIdRef) replace the previous closure captures of workflowIds/activeWorkflowId in useWorkflowSelection, reducing handleWorkflowClick's useCallback deps to only the four stable Zustand store actions.
• Lazy-init siblingsCacheRef: The drag-drop siblings Map is now created on first use via ??= instead of at mount, and all .clear() calls are guarded with optional chaining to handle the null initial state.

Confidence Score: 5/5

Safe to merge — the optimization is semantically equivalent to the old behavior, all route-hook subscriptions have been removed from the leaf rows, and the previously flagged stale-closure on workspaceId in both renderWorkflowItem and renderFolderSection dependency arrays has been corrected.

Every useParams call in the leaf rows and their export hooks has been replaced with either a stable prop or a ref read at action time. The handleWorkflowClick callback now carries only stable Zustand store actions in its deps. The workspaceId stale-closure risk flagged in the prior review round is fixed in both renderWorkflowItem and renderFolderSection. The lazy-init pattern for siblingsCacheRef is a straightforward and safe change. No behavioral regressions were identified.

No files require special attention.

Important Files Changed

Filename	Overview
apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workflow-list/workflow-list.tsx	Threads workspaceId as a stable prop to WorkflowItem/FolderItem, adds activeWorkflowIdRef to the list context, and correctly adds workspaceId to both renderWorkflowItem and renderFolderSection dependency arrays, addressing the stale-closure risk flagged in previous review rounds.
apps/sim/app/workspace/[workspaceId]/w/components/sidebar/hooks/use-workflow-selection.ts	Adds workflowIdsRef and activeWorkflowIdRef to capture click-time values without adding them as useCallback deps, giving handleWorkflowClick a stable identity across tab navigation.
apps/sim/app/workspace/[workspaceId]/w/components/sidebar/hooks/use-sidebar-list-context.ts	Adds activeWorkflowIdRef: RefObject<string
apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workflow-list/components/workflow-item/workflow-item.tsx	Wrapped in React.memo, useParams removed, workspaceId now received as prop, activeWorkflowIdRef consumed from context for delete callbacks instead of live params.workflowId.
apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workflow-list/components/folder-item/folder-item.tsx	Wrapped in React.memo, useParams removed, workspaceId received as prop, activeWorkflowIdRef consumed for delete callbacks; export hooks updated to pass workspaceId explicitly.
apps/sim/app/workspace/[workspaceId]/w/hooks/use-export-workflow.ts	Drops internal useParams call; workspaceId is now a required prop. All call sites updated. Default-parameter removed so TypeScript enforces the caller to supply workspaceId.
apps/sim/app/workspace/[workspaceId]/w/hooks/use-export-selection.ts	Same pattern as use-export-workflow: drops useParams, workspaceId becomes a required prop, both callers updated.
apps/sim/app/workspace/[workspaceId]/w/hooks/use-export-folder.ts	useParams removed, workspaceId added as a required prop; the single caller (FolderItem) updated.
apps/sim/app/workspace/[workspaceId]/w/components/sidebar/hooks/use-drag-drop.ts	Lazy-initialises siblingsCacheRef via ??= instead of eagerly allocating a Map at mount; all .clear() calls converted to optional chaining to be safe when the cache is still null.

Flowchart

%%{init: {'theme': 'neutral'}}%%
flowchart TD
A[Tab Navigation\nworkflowId changes] --> B[WorkflowList re-renders]
B --> C[activeWorkflowIdRef.current updated\nno new object identity]
B --> D[isWorkflowActive recomputed\ndepends on workflowId]
B --> E[listContextValue stays stable\nref identity unchanged]
D --> F[renderWorkflowItem recreated]
F --> G{props changed?}
G -->|active flipped: 2 rows| H[WorkflowItem / FolderItem\nRe-renders]
G -->|props identical: N-2 rows| I[React.memo blocks re-render]
E --> J[Context consumers\nno re-render from context]
subgraph Delete / Export callbacks
K[User clicks Delete/Export]
K --> L[activeWorkflowIdRef.current\nread at call time]
L --> M[Correct live workflowId]
end

Loading

%%{init: {'theme': 'base', 'themeVariables': {"darkMode": true, "background": "#0d1117", "primaryColor": "#21262d", "primaryTextColor": "#e6edf3", "primaryBorderColor": "#8b949e", "lineColor": "#8b949e", "textColor": "#e6edf3", "edgeLabelBackground": "#161b22", "actorBkg": "#21262d", "actorBorder": "#8b949e", "actorTextColor": "#e6edf3", "actorLineColor": "#8b949e", "signalColor": "#8b949e", "signalTextColor": "#e6edf3", "noteBkgColor": "#373320", "noteBorderColor": "#d4a72c", "noteTextColor": "#f0e6c0", "labelBoxBkgColor": "#21262d", "labelBoxBorderColor": "#8b949e", "labelTextColor": "#e6edf3", "loopTextColor": "#e6edf3", "activationBkgColor": "#30363d", "activationBorderColor": "#8b949e"}}}%%
flowchart TD
A[Tab Navigation\nworkflowId changes] --> B[WorkflowList re-renders]
B --> C[activeWorkflowIdRef.current updated\nno new object identity]
B --> D[isWorkflowActive recomputed\ndepends on workflowId]
B --> E[listContextValue stays stable\nref identity unchanged]
D --> F[renderWorkflowItem recreated]
F --> G{props changed?}
G -->|active flipped: 2 rows| H[WorkflowItem / FolderItem\nRe-renders]
G -->|props identical: N-2 rows| I[React.memo blocks re-render]
E --> J[Context consumers\nno re-render from context]
subgraph Delete / Export callbacks
K[User clicks Delete/Export]
K --> L[activeWorkflowIdRef.current\nread at call time]
L --> M[Correct live workflowId]
end

Loading

_{Reviews (3): Last reviewed commit: "fix(sidebar): add workspaceId to render-..." | Re-trigger Greptile}

[waleedlatif1]

@greptile

[waleedlatif1]

@cursor review

[cursor]

✅ Bugbot reviewed your changes and found no new issues!

Comment @cursor review or bugbot run to trigger another review on this PR

^{Reviewed by Cursor Bugbot for commit ca6f169. Configure here.}

[waleedlatif1]

@greptile

[waleedlatif1]

@cursor review

[cursor]

✅ Bugbot reviewed your changes and found no new issues!

Comment @cursor review or bugbot run to trigger another review on this PR

^{Reviewed by Cursor Bugbot for commit ca6f169. Configure here.}