Compare commits

..

1 Commits

Author SHA1 Message Date
ruinivist 80e53ef03c 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
4 changed files with 12 additions and 14 deletions
+4
View File
@@ -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.
-5
View File
@@ -1,5 +0,0 @@
## 2025-06-07 - [Added Security Headers via Caddy]
**Vulnerability:** Missing HTTP security headers (CSP, X-Frame-Options, X-Content-Type-Options, Referrer-Policy).
**Learning:** The application does not apply security headers in the Bun application server but instead relies on the Caddy reverse proxy to inject them in the `Caddyfile`.
**Prevention:** Always configure security headers at the reverse proxy level (`Caddyfile`) instead of within the backend API routing code to ensure all routes, including static files, are properly protected.
-6
View File
@@ -6,12 +6,6 @@
:80 {
encode zstd gzip
header {
X-Frame-Options "SAMEORIGIN"
X-Content-Type-Options "nosniff"
Referrer-Policy "strict-origin-when-cross-origin"
}
handle /mcp {
reverse_proxy 127.0.0.1:3001
}
+8 -3
View File
@@ -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 (
<div className="app-shell" ref={appShellRef}>
{toastMessage && (
@@ -332,9 +339,7 @@ function PrivateApp() {
onSceneChange={handleSceneChange}
onSelectionStateChange={handleCodeBlockSelectionChange}
onEditorActivity={scheduleThemeTokenSync}
onExcalidrawAPI={(api) => {
excalidrawApiRef.current = api;
}}
onExcalidrawAPI={handleExcalidrawAPI}
renderEmbeddable={renderCodeBlockEmbeddable}
/>
<CodeBlockSidebar