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.
This commit is contained in:
@@ -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.
|
||||||
+8
-3
@@ -307,6 +307,13 @@ 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;
|
||||||
|
}, []);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="app-shell" ref={appShellRef}>
|
<div className="app-shell" ref={appShellRef}>
|
||||||
{toastMessage && (
|
{toastMessage && (
|
||||||
@@ -332,9 +339,7 @@ function PrivateApp() {
|
|||||||
onSceneChange={handleSceneChange}
|
onSceneChange={handleSceneChange}
|
||||||
onSelectionStateChange={handleCodeBlockSelectionChange}
|
onSelectionStateChange={handleCodeBlockSelectionChange}
|
||||||
onEditorActivity={scheduleThemeTokenSync}
|
onEditorActivity={scheduleThemeTokenSync}
|
||||||
onExcalidrawAPI={(api) => {
|
onExcalidrawAPI={handleExcalidrawAPI}
|
||||||
excalidrawApiRef.current = api;
|
|
||||||
}}
|
|
||||||
renderEmbeddable={renderCodeBlockEmbeddable}
|
renderEmbeddable={renderCodeBlockEmbeddable}
|
||||||
/>
|
/>
|
||||||
<CodeBlockSidebar
|
<CodeBlockSidebar
|
||||||
|
|||||||
Reference in New Issue
Block a user