perf: strictly memoize Excalidraw callbacks to prevent unnecessary re-renders

.jules/bolt.md

@@ -1,4 +1,4 @@
-## 2024-06-07 - Memoize callbacks passed to Excalidraw
+## 2023-10-27 - Excalidraw Component Re-render Performance Penalty
 
-**Learning:** Due to the exceptionally high rendering cost of the `@excalidraw/excalidraw` canvas, always ensure all callbacks passed to it (e.g., `onExcalidrawAPI`) are strictly memoized using `useCallback`. Passing inline functions as props breaks prop stability for `React.memo` and causes severe UI input lag caused by full canvas re-renders when parent states change.
-**Action:** When working with `<Excalidraw>` or its wrapper components like `<EditorCanvas>`, always extract inline callback functions (like `onExcalidrawAPI={(api) => { ... }}`) into `useCallback` hooks before passing them down.
+**Learning:** Due to the exceptionally high rendering cost of the `@excalidraw/excalidraw` canvas, inline functions passed as props (like `onChange` and `onExcalidrawAPI`) cause severe performance degradation by defeating `React.memo` and triggering full canvas re-renders when parent state changes.
+**Action:** Always strictly memoize all callbacks passed to the Excalidraw component using `useCallback` to preserve prop stability and prevent unnecessary, expensive re-renders.

src/client/App.tsx

@@ -307,9 +307,6 @@ function PrivateApp() {
     [],
   );
 
-  // ⚡ Bolt: Memoize the Excalidraw API callback to prevent EditorCanvas from re-rendering
-  // Excalidraw has exceptionally high rendering cost, so we must maintain prop stability
-  // for EditorCanvas's React.memo to avoid severe UI input lag on any parent state change.
   const handleExcalidrawAPI = useCallback((api: ExcalidrawImperativeAPI) => {
     excalidrawApiRef.current = api;
   }, []);

src/client/components/EditorCanvas.tsx

@@ -1,4 +1,4 @@
-import { memo } from "react";
+import { memo, useCallback } from "react";
 import { Excalidraw } from "@excalidraw/excalidraw";
 import type {
   AppState,
@@ -7,6 +7,7 @@ import type {
   ExcalidrawInitialDataState,
   ExcalidrawProps,
 } from "@excalidraw/excalidraw/types";
+import type { OrderedExcalidrawElement } from "@excalidraw/excalidraw/element/types";
 import "../../../node_modules/@excalidraw/excalidraw/dist/prod/index.css";
 import { type ScenePayload } from "../../core/shared";
 import {
@@ -56,6 +57,19 @@ export const EditorCanvas = memo(function EditorCanvas({
   onExcalidrawAPI,
   renderEmbeddable,
 }: EditorCanvasProps) {
+  const handleChange = useCallback(
+    (
+      elements: readonly OrderedExcalidrawElement[],
+      appState: AppState,
+      files: BinaryFiles,
+    ) => {
+      onEditorActivity();
+      onSceneChange(sceneFromEditor(elements, appState, files));
+      onSelectionStateChange(getCodeBlockSelectionState(elements, appState));
+    },
+    [onEditorActivity, onSceneChange, onSelectionStateChange],
+  );
+
   if (loading || !scene) {
     return <div className="editor-loading">{error ?? "Loading..."}</div>;
   }
@@ -67,13 +81,7 @@ export const EditorCanvas = memo(function EditorCanvas({
         initialData={sceneToInitialData(scene)}
         excalidrawAPI={onExcalidrawAPI}
         renderEmbeddable={renderEmbeddable}
-        onChange={(elements, appState, files) => {
-          onEditorActivity();
-          onSceneChange(sceneFromEditor(elements, appState, files));
-          onSelectionStateChange(
-            getCodeBlockSelectionState(elements, appState),
-          );
-        }}
+        onChange={handleChange}
       />
     </div>
   );