perf: prevent expensive excalidraw re-renders on keystroke
Wraps `onExcalidrawAPI` in `useCallback` to prevent the heavy Excalidraw canvas component from re-rendering on every keystroke when typing in the code block editor. Wraps `DrawingSidebar` in `memo` and utilizes stable callbacks passed from `App.tsx` instead of inline functions to prevent unnecessary list re-renders.
This commit is contained in:
@@ -0,0 +1,4 @@
|
||||
## 2024-06-25 - Excalidraw Memoization
|
||||
|
||||
**Learning:** The `@excalidraw/excalidraw` package's `Excalidraw` component is exceptionally expensive to re-render. Even though `EditorCanvas` was wrapped in `React.memo`, passing an inline arrow function to `onExcalidrawAPI` in the parent `App` broke memoization, causing severe input lag when typing in completely independent UI elements like the codeblock editor sidebar due to the entire canvas re-rendering.
|
||||
**Action:** When passing callbacks to heavy third-party components like Excalidraw, always wrap them in `useCallback` hook to preserve their prop stability and maintain `React.memo` benefits, preventing disastrous performance regressions on typing/input.
|
||||
Reference in New Issue
Block a user