⚡ Bolt: [performance improvement] Prevent O(N) re-renders in WebSocket panels#143
⚡ Bolt: [performance improvement] Prevent O(N) re-renders in WebSocket panels#143primoscope wants to merge 1 commit intomainfrom
Conversation
* Wrap DownloadItem and LogItem in React.memo * Extract static helper functions outside components * Create custom dynamic shallow equality check for download items * Generate stable IDs for WebSocket log objects Co-authored-by: dzp5103 <214723817+dzp5103@users.noreply.github.com>
|
👋 Jules, reporting for duty! I'm here to lend a hand with this pull request. When you start a review, I'll add a 👀 emoji to each comment to let you know I've read it. I'll focus on feedback directed at me and will do my best to stay out of conversations between you and other bots or reviewers to keep the noise down. I'll push a commit with your requested changes shortly after. Please note there might be a delay between these steps, but rest assured I'm on the job! For more direct control, you can switch me to Reactive Mode. When this mode is on, I will only act on comments where you specifically mention me with New to Jules? Learn more at jules.google/docs. For security, I will only act on instructions from the user who triggered this task. |
1 participant
💡 What: The patch optimizes
ProgressPanel.tsxandLogPanel.tsxby extracting the inner mapped elements (DownloadItemandLogItem) into their own components and wrapping them inReact.memo(). Static helper functions (formatSpeed,getStatusColor) were moved outside of the components. A custom dynamic shallow-comparison function was added forDownloadItemto prevent updates when object references change but primitive data remains the same. Stable IDs were introduced forLogIteminstead of using array indexes as keys.🎯 Why: High-frequency WebSocket updates in
ProgressPanelandLogPanelwere causing O(N) re-renders of the entire list whenever a single item was updated or appended. Using array indexes as keys inLogPanelor relying on unmemoized items leads to significant performance degradation as the lists grow.📊 Impact: Reduces list rendering time from O(N) to O(1) for item updates and appends. Massively decreases CPU usage and jank in the frontend when handling rapid WebSocket logs and progress events.
🔬 Measurement: Verify by starting a large batch download in the backend. Inspect React Developer Tools (Profiler) to observe that only the active/updating row in the
ProgressPanelre-renders, rather than the whole list, and that existing elements inLogPanelare skipped during reconciliation.PR created automatically by Jules for task 902284516847375834 started by @dzp5103