⚡ Bolt: Optimize ProgressPanel with React.memo for O(1) re-renders#145
⚡ Bolt: Optimize ProgressPanel with React.memo for O(1) re-renders#145primoscope wants to merge 1 commit intomainfrom
Conversation
…pdates 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: Extracted the individual download items in the
ProgressPanellist into a separateDownloadItemcomponent and wrapped it inReact.memowith a custom props equality function. Also hoisted utility functions (formatSpeed,formatETA,getStatusColor) out of the component body so they aren't recreated on every render.🎯 Why: The
ProgressPanelhandles high-frequency updates (e.g., download progress via WebSockets). Previously, every single progress update to any download caused the entireProgressPaneland all individual download items to re-render, creating an O(N) re-rendering bottleneck. This scales poorly as the queue size grows.📊 Impact: Prevents unaffected download items from pointlessly re-rendering. It changes the update cost from O(N) to O(1) per progress update, significantly reducing CPU usage and main thread blocking on the frontend when multiple files are downloading concurrently.
🔬 Measurement: Verify by opening React Developer Tools (Profiler) and starting multiple downloads. Observe that when a WebSocket message updates the progress of Download A, Download B's list item does not re-render. Alternatively, use
pnpm run buildto ensure type safety is maintained.PR created automatically by Jules for task 12423967608611424898 started by @dzp5103