fix: Optimize frameToHighlight state change and snapLines state change (#8763)

Fix case when frame interactions recursively call setState() without any change.
This commit is contained in:
Márk Tolmács 2024-11-21 15:19:00 +01:00 committed by GitHub
parent d21e0008dd
commit ab8b3537b3
No known key found for this signature in database
GPG key ID: B5690EEEBB952194

View file

@ -7940,10 +7940,14 @@ class App extends React.Component<AppProps, AppState> {
isFrameLikeElement(e), isFrameLikeElement(e),
); );
const topLayerFrame = this.getTopLayerFrameAtSceneCoords(pointerCoords); const topLayerFrame = this.getTopLayerFrameAtSceneCoords(pointerCoords);
this.setState({ const frameToHighlight =
frameToHighlight: topLayerFrame && !selectedElementsHasAFrame ? topLayerFrame : null;
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 // Marking that click was used for dragging to check
// if elements should be deselected on pointerup // if elements should be deselected on pointerup
@ -8090,7 +8094,9 @@ class App extends React.Component<AppProps, AppState> {
this.scene.getNonDeletedElementsMap(), 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 // when we're editing the name of a frame, we want the user to be
// able to select and interact with the text input // able to select and interact with the text input