From aed3ed2e8bf3c2af45b029bf9c70ca40eb9c3095 Mon Sep 17 00:00:00 2001
From: ruinivist <179396038+ruinivist@users.noreply.github.com>
Date: Mon, 1 Jun 2026 07:37:59 +0000
Subject: [PATCH] perf: memoize EditorCanvas to prevent unnecessary re-renders

---
 .jules/bolt.md                         | 3 +++
 src/client/components/EditorCanvas.tsx | 7 +++++--
 2 files changed, 8 insertions(+), 2 deletions(-)
 create mode 100644 .jules/bolt.md

diff --git a/.jules/bolt.md b/.jules/bolt.md
new file mode 100644
index 0000000..95a9577
--- /dev/null
+++ b/.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.
diff --git a/src/client/components/EditorCanvas.tsx b/src/client/components/EditorCanvas.tsx
index 2f4eaf4..9f28eae 100644
--- a/src/client/components/EditorCanvas.tsx
+++ b/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>
   );
-}
+});