⚡ Bolt: Prevent unnecessary re-renders with Zustand selectors and React.memo#4
⚡ Bolt: Prevent unnecessary re-renders with Zustand selectors and React.memo#4sourabhrajcodes wants to merge 1 commit into
Conversation
- Refactored `Toolbar`, `Sidebar`, and `CanvasArea` to use granular Zustand selectors instead of destructuring the whole state, preventing unnecessary re-renders. - Wrapped `ElementWrapper` in `React.memo` to prevent O(N) re-renders of all canvas elements when a single element is being interacted with (e.g., dragged). - Added .jules/bolt.md tracking these learnings. 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: Replaced destructuring of
useEditorStorewith granular selectors in multiple components. Wrapped the canvasElementWrapperinReact.memo.🎯 Why: Destructuring the whole state in Zustand makes components subscribe to all store changes. This was causing components like Toolbar to re-render when a canvas element was dragged. Furthermore,
CanvasArearendered all elements on every state change;React.memoprevents this O(N) overhead.📊 Impact: Eliminates O(N) full-canvas re-renders and unnecessary sidebar/toolbar re-renders, significantly improving performance when dragging and modifying canvas elements.
🔬 Measurement: Run a React profiler while dragging an element on the canvas or selecting an element; the entire app structure will no longer re-render on each mouse movement.
PR created automatically by Jules for task 1101817995479856433 started by @sourabhrajcodes