⚡ Bolt: [performance improvement] Optimize high-frequency WebSocket renders#134
⚡ Bolt: [performance improvement] Optimize high-frequency WebSocket renders#134primoscope wants to merge 1 commit intomainfrom
Conversation
…enders - Extracted static helper functions in ProgressPanel and LogPanel - Wrapped DownloadItem and LogItem in React.memo() - Added a custom equality function for DownloadItem polling stability - Replaced array index with stable generated IDs for LogItem keys - Added critical learnings journal to .jules/bolt.md 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. |
💡 What:
formatSpeed,getStatusColor, etc.) outside of component bodies to prevent memory churn on re-renders.DownloadItemandLogItemcomponents wrapped inReact.memo().arePropsEqualforDownloadItemto ensure API polling does not force unnecessary re-renders when data is identical.Date.now() + Math.random()) for incoming log WebSocket messages instead of using the array index as the Reactkey..jules/bolt.mdwith critical learnings on high-frequency WebSocket rendering.🎯 Why:
The application relies heavily on high-frequency WebSocket updates (progress bars, download speeds, real-time logs) and interval polling backups. Previously, an update to a single download item or the appending of a single log message would force React to re-render the entire list of components (O(N) re-renders). This severely impacts performance, causes UI stuttering during heavy downloads, and increases memory usage.
📊 Impact:
Reduces high-frequency list rendering cost from O(N) to O(1) for both the
ProgressPanelandLogPanel. Memory allocation is reduced as helper functions are no longer repeatedly created inside the render loop.🔬 Measurement:
cd frontend && pnpm run build) and start the application.ProgressPanelandLogPanelwill no longer highlight full-list re-renders on every incoming WebSocket frame; only the specificDownloadItemor newly appendedLogItemwill render.PR created automatically by Jules for task 7171515410301489171 started by @dzp5103