⚡ Bolt: [performance improvement] Optimize ProgressPanel with React.memo#127
⚡ Bolt: [performance improvement] Optimize ProgressPanel with React.memo#127primoscope wants to merge 1 commit intomainfrom
Conversation
Extracted the inline download items from the `ProgressPanel` component into a separate memoized `DownloadItem` component. By passing a custom equality function to `React.memo` that specifically checks the individual fields of `DownloadStatusResponse` for equality, we prevent unnecessary re-renders of the entire list whenever ANY individual download progress updates or when the 5-second polling backup triggers array replacements. 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:
Extracted the inline mapped JSX inside
ProgressPanel.tsxinto a newDownloadItemcomponent and wrapped it inReact.memowith a custom props equality function.🎯 Why:
The
ProgressPanelcomponent receives frequent WebSocket updates for progress and speed, and falls back to polling the API every 5 seconds. Because it maps over thedownloadsarray inline, every time any download updates or polling replaces the array reference, all download items re-render. This is highly inefficient, especially when multiple downloads are active.📊 Impact:
Significantly reduces React re-renders. Only the specific
DownloadItemcomponents whose underlying primitive data (likeprogress,speed,status, etc.) actually change will re-render, reducing CPU usage and layout thrashing.🔬 Measurement:
This can be verified by using React Developer Tools Profiler and observing that only active downloads re-render when progress updates are received over WebSocket or via polling, while completed or paused items do not.
PR created automatically by Jules for task 11612226282723078058 started by @dzp5103