ruinivist
80e53ef03c
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.
659 B
659 B
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.