perf: memoize Excalidraw API callback to prevent full canvas re-renders

This optimization prevents the `EditorCanvas` (and thereby the heavy `@excalidraw/excalidraw` component) from re-rendering due to prop instability of the inline `onExcalidrawAPI` function in `PrivateApp` when parent state changes. This mitigates severe UI input lag. A new entry was also added to `.jules/bolt.md` documenting this insight.
2026-06-07 07:41:04 +00:00
parent 01300c7061
commit 80e53ef03c
2 changed files with 12 additions and 3 deletions
@@ -0,0 +1,4 @@
+## 2024-06-07 - Memoize callbacks passed to Excalidraw
+
+**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.