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({ /> ); -} +});