⚡ Bolt: optimize Section component re-renders#81
Conversation
Optimize scroll-based animations by transitioning from React state to direct DOM manipulation within IntersectionObserver callbacks. This prevents redundant re-renders of section content and hero elements as they enter/leave the viewport. 💡 What: - Replaced `isVisible` state with direct `classList` manipulation in `Section`. - Replaced `isHome` state with direct `style` manipulation in `HeroSection`. - Simplified viewport dimension lookups in both components. 🎯 Why: Eliminates full component tree re-renders triggered by IntersectionObserver updates, improving scroll performance and reducing CPU usage. 📊 Impact: Reduces re-renders during scrolling by 100% for the optimized components. 🔬 Measurement: Verified functional parity via Playwright screenshots and confirmed build stability with `pnpm build`.
|
👋 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. |
|
This PR optimizes the
SectionandHeroSectioncomponents to improve rendering performance during scroll-based animations. By using direct DOM manipulation (viarefsandclassList/style) withinIntersectionObservercallbacks instead of React state (useState), we eliminate unnecessary re-renders of the entire component tree whenever a section enters or leaves the viewport.Key Changes:
src/components/section.tsx: RemovedisVisiblestate and transitioned to directclassList.add('pop-up-child')manipulation.src/components/sections/hero.tsx: RemovedisHomestate and transitioned to directstyleproperty manipulation for transform and opacity..jules/bolt.md: Added a new journal entry documenting the learning that direct DOM manipulation is preferred for scroll-triggered animations in this architecture.Impact:
IntersectionObserverduring page navigation and scrolling.Verification:
pnpm lintandpnpm buildsuccessfully.hero_initial.png,hero_exit.png,skills_visible.png).PR created automatically by Jules for task 12029781278911262176 started by @amrabed