⚡ Bolt: Optimize Card components to avoid re-renders on URL change#78
⚡ Bolt: Optimize Card components to avoid re-renders on URL change#78nkissick-del wants to merge 1 commit intomainfrom
Conversation
Removes dependency on `useNavigatePage` in `ChatCard`, `SearchCard`, and `AgentCard`. This hook implicitly subscribes to `useSearchParams`, causing these components (and the entire list) to re-render whenever URL query parameters change (e.g. during filtering or pagination). By using `useNavigate` directly with `useCallback`, we ensure: 1. Components only re-render when their direct props change (preserving `React.memo` benefits). 2. `onClick` handlers passed to `HomeCard` are stable, preventing unnecessary child re-renders. Impact: - Reduces re-renders of list items during navigation/search parameter updates. - Improves performance of large lists. Co-authored-by: nkissick-del <236767245+nkissick-del@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: Refactor Card components to use stable navigation handlers
💡 What:
Replaced
useNavigatePagewith directuseNavigateanduseCallbackinChatCard,SearchCard, andAgentCard.🎯 Why:
useNavigatePageusesuseSearchParamsinternally. This meant that any change to the URL query parameters (which happens frequently in this app for search, filtering, pagination) triggered a re-render of EVERY card in the list, even if the card data hadn't changed. This defeated the purpose ofReact.memoon these components.Additionally, the navigation function returned by
useNavigatePagewas a new function instance on every render (due to the way it was called), causing the childHomeCardto re-render even ifChatCardprops were stable (ifChatCardre-rendered for any reason).📊 Impact:
onClickhandlers are stable references.microscope Measurement:
ChatCard,SearchCard,AgentCardno longer importuseNavigatePage.React.memois now effective because props and hooks are stable.PR created automatically by Jules for task 13386913763710375106 started by @nkissick-del