⚡ Bolt: [performance improvement] Optimize React list re-renders#129
⚡ Bolt: [performance improvement] Optimize React list re-renders#129primoscope wants to merge 1 commit intomainfrom
Conversation
…d Progress panels Implemented `React.memo` for individual list items in `LogPanel` and `ProgressPanel` to prevent full list re-renders on high-frequency WebSocket and polling updates. - Added stable generated client IDs for logs to replace index keys. - Implemented custom equality functions in `DownloadItem` to handle object reference changes caused by the 5-second API polling fallback. - Addressed TypeScript typing issues by omitting explicit `React.FC` on memoized components. 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 list rendering logic into
React.memocomponents (LogItemandDownloadItem) in theLogPanelandProgressPanel. Implemented safe, stable client-side IDs for logs and custom equality functions for downloads to handle frequent data replacements.🎯 Why: Previously, the frontend would re-render the entire history of logs every time a single new log arrived over WebSocket because
indexwas used as a key. Similarly, the 5-second API polling fallback forProgressPanelfully replaced thedownloadsarray, generating new object references that bypassed standard shallow React comparisons, causing full UI recalculations across all active downloads.📊 Impact: Significantly reduces CPU overhead and main-thread blocking by isolating re-renders to only the specific item that has changed (e.g. only the currently active download progresses). Prevents O(N) re-rendering scaling issues in the log view.
🔬 Measurement: Verify by running the application and observing React DevTools Profiler during an active download; only the specific
DownloadItemprocessing should "flash" as re-rendering, and appending new logs will not trigger renders on older log items. Backend testing passes fully.PR created automatically by Jules for task 5232294437624481220 started by @dzp5103