⚡ Bolt: Prevent unnecessary re-renders using Zustand useShallow selectors

.jules/bolt.md

@@ -0,0 +1,3 @@
+## 2024-06-28 - [Prevent unnecessary re-renders in Zustand]
+**Learning:** Destructuring the entire state object from a Zustand store (e.g., `const { addElement, activePageId } = useEditorStore()`) causes components to re-render on EVERY state change, even when the changed properties aren't used. For instance, `Toolbar` re-renders every time an element is moved or selected.
+**Action:** Always use granular selectors `useEditorStore(state => state.property)` or `useShallow` when selecting multiple properties from a Zustand store to prevent unnecessary re-renders.

frontend/src/components/CanvasArea.tsx

@@ -1,6 +1,7 @@
 import React, { useRef, useState, useEffect } from 'react';
 import { Stage, Layer, Rect, Text, Transformer } from 'react-konva';
 import { useEditorStore } from '../store/useEditorStore';
+import { useShallow } from 'zustand/react/shallow';
 import type { TextElement, PageElement } from '../types';
 
 interface ElementWrapperProps {
@@ -74,7 +75,17 @@ const ElementWrapper: React.FC<ElementWrapperProps> = ({ element, isSelected, on
 };
 
 export const CanvasArea = () => {
-  const { pages, activePageId, selectedElementId, selectElement, updateElement } = useEditorStore();
+  // ⚡ Bolt Optimization: Using useShallow avoids full component re-renders
+  // when unrelated properties in the store change, maintaining 60fps during canvas interactions.
+  const { pages, activePageId, selectedElementId, selectElement, updateElement } = useEditorStore(
+    useShallow((state) => ({
+      pages: state.pages,
+      activePageId: state.activePageId,
+      selectedElementId: state.selectedElementId,
+      selectElement: state.selectElement,
+      updateElement: state.updateElement,
+    }))
+  );
 
   const activePage = pages.find(p => p.id === activePageId) || pages[0];
   const [scale] = useState(1);

frontend/src/components/Sidebar.tsx

@@ -1,7 +1,18 @@
 import { useEditorStore } from '../store/useEditorStore';
+import { useShallow } from 'zustand/react/shallow';
 
 export const Sidebar = () => {
-  const { pages, activePageId, addPage, setActivePage, selectedElementId } = useEditorStore();
+  // ⚡ Bolt Optimization: Using useShallow prevents Sidebar from re-rendering
+  // when an element is dragged or updated, improving UI responsiveness.
+  const { pages, activePageId, addPage, setActivePage, selectedElementId } = useEditorStore(
+    useShallow((state) => ({
+      pages: state.pages,
+      activePageId: state.activePageId,
+      addPage: state.addPage,
+      setActivePage: state.setActivePage,
+      selectedElementId: state.selectedElementId,
+    }))
+  );
 
   return (
     <div className="w-64 bg-white border-r flex flex-col h-full shadow-sm">

frontend/src/components/Toolbar.tsx

@@ -1,9 +1,17 @@
 import { Type, Table, Download, Save, Undo, Redo, LayoutTemplate } from 'lucide-react';
 import { useEditorStore } from '../store/useEditorStore';
+import { useShallow } from 'zustand/react/shallow';
 import type { TextElement } from '../types';
 
 export const Toolbar = () => {
-  const { addElement, activePageId } = useEditorStore();
+  // ⚡ Bolt Optimization: Using useShallow prevents Toolbar from re-rendering
+  // on every canvas element update (e.g. dragging an element), reducing main thread work.
+  const { addElement, activePageId } = useEditorStore(
+    useShallow((state) => ({
+      addElement: state.addElement,
+      activePageId: state.activePageId,
+    }))
+  );
 
   const handleAddText = () => {
     if (!activePageId) return;