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

@@ -7940,10 +7940,14 @@ class App extends React.Component<AppProps, AppState> {
           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<AppProps, AppState> {
             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