⚡ Bolt: optimize filter context to prevent unnecessary re-renders during scroll#103
Conversation
…roll - Split `FilterContext` into `FilterStateContext` and `FilterUIContext` - Introduced `useFilterUI` hook for visibility state - Moved `activeFiltersCount` calculation into memoized context state - Updated all consumers (`Home`, `ScrollToTopButton`, `ChatWidget`, `UnifiedFilterBar`) to use the appropriate hooks - Updated tests and mocks to reflect the split context This optimization prevents the frequent scroll-based visibility updates from triggering re-renders in data-filtering sections like Skills and Projects.
|
👋 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. |
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
This PR implements Context Splitting for the filter logic to improve scroll performance.
💡 What
The
FilterContextpreviously bundled both the filter selections (selected) and the filter bar's visibility state (isFilterBarVisible). Since the visibility state is updated on every scroll event in theHomepage, it caused the entire context to change frequently.I split this into:
FilterStateContext: Manages filter selections, setters, and a memoizedactiveFiltersCount.FilterUIContext: Manages the visibility toggle state for theUnifiedFilterBar.🎯 Why
Portfolio sections like
SkillsSection,ProjectsSection, andCertificationsSectionconsumeuseFilterto get theselectedfilters. Previously, they were re-rendering on every scroll becauseisFilterBarVisiblewas part of the same context. By splitting the context, these sections now only re-render when the actual filter selections change.📊 Impact
🔬 Measurement
Verified that
pnpm run testpasses, including new tests for the split hooks. Manual inspection of component re-renders (via React DevTools) confirms that sections no longer re-render during scroll.PR created automatically by Jules for task 5688837270191785137 started by @amrabed