Skip to content

⚡ Bolt: Optimize ProgressPanel with React.memo for O(1) re-renders#145

Draft
primoscope wants to merge 1 commit intomainfrom
bolt-optimize-progress-panel-12423967608611424898
Draft

⚡ Bolt: Optimize ProgressPanel with React.memo for O(1) re-renders#145
primoscope wants to merge 1 commit intomainfrom
bolt-optimize-progress-panel-12423967608611424898

Conversation

@primoscope
Copy link
Copy Markdown
Owner

💡 What: Extracted the individual download items in the ProgressPanel list into a separate DownloadItem component and wrapped it in React.memo with 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 ProgressPanel handles high-frequency updates (e.g., download progress via WebSockets). Previously, every single progress update to any download caused the entire ProgressPanel and 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 build to ensure type safety is maintained.


PR created automatically by Jules for task 12423967608611424898 started by @dzp5103

…pdates

Co-authored-by: dzp5103 <214723817+dzp5103@users.noreply.github.com>
@google-labs-jules
Copy link
Copy Markdown

👋 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 @jules. You can find this option in the Pull Request section of your global Jules UI settings. You can always switch back!

New to Jules? Learn more at jules.google/docs.


For security, I will only act on instructions from the user who triggered this task.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant