perf: memoize EditorCanvas to prevent unnecessary re-renders

.jules/bolt.md

@@ -0,0 +1,3 @@
+## 2024-06-25 - React.memo for EditorCanvas
+**Learning:** Re-rendering large complex components like Excalidraw on every keystroke (like editing a drawing title in the sidebar) can cause noticeable main thread blocking. React.memo is highly effective here since the canvas only cares about the active drawing ID and scene data, not transient UI state like sidebar visibility or title input state.
+**Action:** Always wrap heavy third-party React components (especially canvases, maps, or code editors) in `React.memo()` if they are placed adjacent to frequently updating state in their parent component.

src/client/components/EditorCanvas.tsx

@@ -1,3 +1,4 @@
+import { memo } from "react";
 import "../../../node_modules/@excalidraw/excalidraw/dist/prod/index.css";
 import { Excalidraw } from "@excalidraw/excalidraw";
 import type {
@@ -33,7 +34,9 @@ function sceneFromEditor(
   };
 }
 
-export function EditorCanvas({
+// ⚡ Bolt: Wrapped in React.memo to prevent expensive Excalidraw re-renders
+// when parent state (like the sidebar open state or drawing title input) changes.
+export const EditorCanvas = memo(function EditorCanvas({
   activeId,
   scene,
   loading,
@@ -58,4 +61,4 @@ export function EditorCanvas({
       />
     </div>
   );
-}
+});