⚡ Bolt: optimize scroll performance#8
Conversation
This commit implements several performance optimizations for the Markdown viewer: - Bypasses React for high-frequency scroll progress bar updates using `useRef` and direct DOM manipulation. - Throttles scroll event handling using `requestAnimationFrame`. - Migrates `filePath` and `activeHeading` tracking to `useRef` to eliminate redundant component-wide re-renders. - Adds ESLint ignores for control characters in the markdown repair regex. - Documents the optimization in .jules/bolt.md. Performance Impact: Reduces re-renders during active scrolling from ~190 to just 2 (for initial scroll start). Co-authored-by: VagueDustin <127912586+VagueDustin@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: Optimized the scroll handling logic in
App.jsxby bypassing React's reconciliation for the progress bar, throttling updates withrequestAnimationFrame, and usinguseReffor non-render-critical state.🎯 Why: Every scroll event was triggering a full component re-render due to the
scrollProgressstate update, leading to significant CPU overhead and potential frame drops on large documents.📊 Impact: Reduces re-renders during a standard scroll session from ~192 to 2. Significant reduction in main-thread work.
🔬 Measurement: Verified using a Playwright script that instruments the
Appcomponent and countsconsole.logrender markers during automated scrolling of a 50-section markdown file.PR created automatically by Jules for task 9892853569187557366 started by @VagueDustin