⚡ Bolt: [performance improvement] Optimize React re-renders in WebSocket panels#140
⚡ Bolt: [performance improvement] Optimize React re-renders in WebSocket panels#140primoscope wants to merge 1 commit intomainfrom
Conversation
…ket panels Added `React.memo` and stable IDs to `ProgressPanel` and `LogPanel` components to prevent unnecessary re-renders during high-frequency WebSocket updates. Extracted static formatting functions to prevent recreation on every render cycle. 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:
React.memocomponents (DownloadItemandLogItem).DownloadItemto only re-render when relevant primitive fields change.LogPanelcan use them as React keys instead of unstable array indices.formatSpeed,getLogColor) outside the component bodies to prevent memory reallocation on every render.🎯 Why:
The application receives high-frequency updates via WebSockets for both download progress and system logs. Previously,
ProgressPanelandLogPanelwere updating state in the parent component and mapping over arrays using inline JSX or array indices as keys. This meant that a single progress tick on one download would force all download cards to re-render. Similarly, when the log array shifted (due to auto-scroll limits or new entries), React was forced to re-render every single log node because the array index keys shifted. This leads to O(N) rendering performance degradation, blocking the main thread and causing UI stutter during active downloads.📊 Impact:
🔬 Measurement:
DownloadItemwhose progress changed is re-rendering, while the rest of the list and the parentProgressPanelremain green/memoized. TheLogItemcomponents will only render once upon creation.PR created automatically by Jules for task 12931357782890197324 started by @dzp5103