fix(logs): stabilize callbacks and memo-wrap components to eliminate re-render cascade#3222
fix(logs): stabilize callbacks and memo-wrap components to eliminate re-render cascade#3222waleedlatif1 merged 5 commits intostagingfrom
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub. |
Greptile OverviewGreptile SummaryThis PR implements comprehensive performance optimizations to eliminate re-render cascades in the logs page. The changes are well-structured and address multiple sources of unnecessary re-renders. Key improvements:
Previously flagged issues acknowledged: Confidence Score: 4/5
Important Files Changed
Flowchartflowchart TD
A[User Action] --> B{Action Type}
B -->|Click Log| C[dispatch TOGGLE_LOG]
B -->|Navigate| D[handleNavigateNext/Prev]
B -->|Refresh| E[handleRefresh]
B -->|Toggle Live| F[handleToggleLive]
B -->|Hover Log| G[prefetchLogDetail]
C --> H[useReducer updates state]
D --> I[Read from logsRef.current]
E --> J[Read from refs, start timer]
F --> K[setIsLive updater, start timer]
G --> L[QueryClient prefetch]
H --> M[Stable dispatch prevents re-render]
I --> M
J --> N[refreshTimersRef tracks cleanup]
K --> N
L --> O[Instant panel on click]
M --> P[Memoized components skip render]
N --> Q[Cleanup on unmount]
P --> R[StatusBar custom comparator]
P --> S[Dashboard execution stabilization]
R --> T[Structural segment comparison]
S --> U[Reuse prev refs if data unchanged]
T --> V[No re-render cascade]
U --> V
Last reviewed commit: ca0105a |
Additional Comments (1)
The custom In practice this won't cause a bug today because Note that Note: If this suggestion doesn't match your team's coding style, reply to this and let me know. I'll remember it for next time! |
a503d3c to
72d613e
Compare
…re-render cascade
|
@cursor review |
|
@cursor review |
apps/sim/app/workspace/[workspaceId]/logs/components/log-details/log-details.tsx
Show resolved
Hide resolved
…e read, short-circuit memo comparator
|
@cursor review |
apps/sim/app/workspace/[workspaceId]/logs/components/dashboard/dashboard.tsx
Show resolved
Hide resolved
apps/sim/app/workspace/[workspaceId]/logs/components/log-details/log-details.tsx
Outdated
Show resolved
Hide resolved
apps/sim/app/workspace/[workspaceId]/logs/components/dashboard/dashboard.tsx
Show resolved
Hide resolved
|
@cursor review |
Summary
selectedLogId+isSidebarOpenuseState withuseReducerfor stable dispatchhandleLogClick,handleNavigateNext/Prev,handleRefresh,handleToggleLive,loadMoreLogs,handleExport) via refs and stable dispatchLogsToolbar,LogRowContextMenu,NotificationSettings,WorkflowOutputSection,Dashboard,SubBlockRow,ViewerInnerareStatusBarPropsEqualcomparator for structural segment comparisonWorkflowsList/StatusBarbarrel exports that were bypassing memosetTimeoutcalls to prevent unmounted state updatesscrollContainerRef,barsAreaRef,useAlertRulestate,as anycastType of Change
Testing
Tested manually with React Scan profiling
Checklist