Compare commits
4 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| 2c88ac7972 | |||
| 0f984d4dea | |||
| 0a1d70b605 | |||
| 40bf063490 |
@@ -1,4 +0,0 @@
|
|||||||
## 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.
|
|
||||||
File diff suppressed because one or more lines are too long
+3
-8
@@ -307,13 +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;
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="app-shell" ref={appShellRef}>
|
<div className="app-shell" ref={appShellRef}>
|
||||||
{toastMessage && (
|
{toastMessage && (
|
||||||
@@ -339,7 +332,9 @@ function PrivateApp() {
|
|||||||
onSceneChange={handleSceneChange}
|
onSceneChange={handleSceneChange}
|
||||||
onSelectionStateChange={handleCodeBlockSelectionChange}
|
onSelectionStateChange={handleCodeBlockSelectionChange}
|
||||||
onEditorActivity={scheduleThemeTokenSync}
|
onEditorActivity={scheduleThemeTokenSync}
|
||||||
onExcalidrawAPI={handleExcalidrawAPI}
|
onExcalidrawAPI={(api) => {
|
||||||
|
excalidrawApiRef.current = api;
|
||||||
|
}}
|
||||||
renderEmbeddable={renderCodeBlockEmbeddable}
|
renderEmbeddable={renderCodeBlockEmbeddable}
|
||||||
/>
|
/>
|
||||||
<CodeBlockSidebar
|
<CodeBlockSidebar
|
||||||
|
|||||||
@@ -231,6 +231,8 @@ export function useDrawingSession() {
|
|||||||
}
|
}
|
||||||
if (isManual) {
|
if (isManual) {
|
||||||
showToast("Saved", 2000);
|
showToast("Saved", 2000);
|
||||||
|
} else {
|
||||||
|
showToast(null);
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
.catch((saveError: unknown) => {
|
.catch((saveError: unknown) => {
|
||||||
@@ -251,6 +253,8 @@ export function useDrawingSession() {
|
|||||||
);
|
);
|
||||||
if (isManual) {
|
if (isManual) {
|
||||||
showToast("Save failed", 2000);
|
showToast("Save failed", 2000);
|
||||||
|
} else {
|
||||||
|
showToast("Autosave failed");
|
||||||
}
|
}
|
||||||
throw saveError;
|
throw saveError;
|
||||||
})
|
})
|
||||||
|
|||||||
@@ -12,6 +12,7 @@ export function createServer(options: CreateServerOptions = {}) {
|
|||||||
return {
|
return {
|
||||||
port: Number(process.env.PORT ?? "3000"),
|
port: Number(process.env.PORT ?? "3000"),
|
||||||
hostname: process.env.HOST ?? "localhost",
|
hostname: process.env.HOST ?? "localhost",
|
||||||
|
idleTimeout: 120,
|
||||||
routes: {
|
routes: {
|
||||||
"/": (request: Request) => {
|
"/": (request: Request) => {
|
||||||
const drawing = drawingStore.ensureInitialDrawing();
|
const drawing = drawingStore.ensureInitialDrawing();
|
||||||
|
|||||||
Reference in New Issue
Block a user