⚡ Bolt: optimize scroll performance and reduce redundant re-renders#12
⚡ Bolt: optimize scroll performance and reduce redundant re-renders#12VagueDustin wants to merge 1 commit into
Conversation
💡 What: - Replaced `scrollProgress` state with `progressBarRef` and direct DOM manipulation. - Implemented `requestAnimationFrame` for throttled scroll handling. - Introduced `activeHeadingRef` to prevent redundant TOC highlighting state updates. - Converted `filePath` to `filePathRef` as it is not used in rendering. - Fixed `no-control-regex` lint errors in markdown repair logic. 🎯 Why: The `App` component was re-rendering on every scroll event due to the `scrollProgress` state update. This caused significant CPU usage and stuttering on large documents. Additionally, frequent `setActiveHeading` calls during scrolling within a single section further increased rendering overhead. 📊 Impact: - Eliminates `App` component re-renders during scrolling (from O(pixels) to zero). - Reduces CPU overhead by throttling heavy scroll logic (ToC tracking) with `requestAnimationFrame`. - Improves responsiveness and eliminates scroll stuttering, especially on documents with many headings. 🔬 Measurement: Observe React DevTools "Highlight Updates" while scrolling; the `App` component no longer flashes, and the progress bar updates smoothly. CPU usage in Chrome Task Manager shows a noticeable reduction during fast scrolling. 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
⚡ Bolt here! I've implemented a high-impact performance optimization for the scroll handling system.
By bypassing React's reconciliation for the scroll progress bar and using
requestAnimationFramefor throttling, I've eliminated the costly component-wide re-renders that were previously occurring on every single scroll event. I've also optimized the Table of Contents highlighting logic to only trigger state updates when a new heading actually enters the viewport.These changes make the document viewing experience buttery smooth, even for large files with complex Markdown and LaTeX.
Lightning fast is the only speed I know! ⚡
PR created automatically by Jules for task 17314245955409064852 started by @VagueDustin