⚡ Bolt: Optimize Zustand state access in components#2
Conversation
Refactored Zustand state access from object destructuring to specific selector functions in `Toolbar`, `Sidebar`, and `CanvasArea` components. This prevents unnecessary re-renders when other unrelated parts of the store change. Co-authored-by: sourabhrajcodes <95199723+sourabhrajcodes@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: Refactored Zustand state access from object destructuring (e.g.,
const { pages, activePageId } = useEditorStore()) to specific selector functions (e.g.,const pages = useEditorStore(state => state.pages)).🎯 Why: In Zustand, using destructuring on the return value of the hook subscribes the component to the entire state object. Any update to the store—such as continuous x/y coordinate updates during a drag event in the CanvasArea—would cause all components using the store (Sidebar, Toolbar, CanvasArea) to re-render.
📊 Impact: Drastically reduces unnecessary re-renders across the application, especially during canvas interactions. Components now only re-render when the specific state properties they depend on change.
🔬 Measurement: Verify by adding
console.logto the components and dragging an element on the canvas. Previously, Toolbar and Sidebar would log on every mouse move. Now, they will not log unless their specific state (like selected page) changes.PR created automatically by Jules for task 12862618554371311607 started by @sourabhrajcodes