From ab8b3537b386403f7a09288eb5925ce1aae5f21d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?M=C3=A1rk=20Tolm=C3=A1cs?= Date: Thu, 21 Nov 2024 15:19:00 +0100 Subject: [PATCH] fix: Optimize frameToHighlight state change and snapLines state change (#8763) Fix case when frame interactions recursively call setState() without any change. --- packages/excalidraw/components/App.tsx | 16 +++++++++++----- 1 file changed, 11 insertions(+), 5 deletions(-) diff --git a/packages/excalidraw/components/App.tsx b/packages/excalidraw/components/App.tsx index 44d49cd0a..c4b4f71e2 100644 --- a/packages/excalidraw/components/App.tsx +++ b/packages/excalidraw/components/App.tsx @@ -7940,10 +7940,14 @@ class App extends React.Component { isFrameLikeElement(e), ); const topLayerFrame = this.getTopLayerFrameAtSceneCoords(pointerCoords); - this.setState({ - frameToHighlight: - topLayerFrame && !selectedElementsHasAFrame ? topLayerFrame : null, - }); + const frameToHighlight = + topLayerFrame && !selectedElementsHasAFrame ? topLayerFrame : null; + // Only update the state if there is a difference + if (this.state.frameToHighlight !== frameToHighlight) { + flushSync(() => { + this.setState({ frameToHighlight }); + }); + } // Marking that click was used for dragging to check // if elements should be deselected on pointerup @@ -8090,7 +8094,9 @@ class App extends React.Component { this.scene.getNonDeletedElementsMap(), ); - this.setState({ snapLines }); + flushSync(() => { + this.setState({ snapLines }); + }); // when we're editing the name of a frame, we want the user to be // able to select and interact with the text input