Fix performance issue

Summary:
Fix performance issue in rendering sidebars

Noticed during debugging that sidebars are continuously re-rendering if the mouse is on top of them, which is caused by the mouseMove handler of resizable containers always updating the state with a fresh object, causing a render (see yellow rectangles in test plan). Short circuited this by checking if the resize state should actually change and bailing out otherwise.

Reviewed By: nikoant

Differential Revision: D28441431

fbshipit-source-id: b3f125f3a392a5cf9b021a6636ba39b5a23d541c

desktop/flipper-plugin/src/ui/Interactive.tsx

@@ -626,6 +626,17 @@ export class Interactive extends React.Component<
       newCursor = 'row-resize';
     }
 
+    if (
+      this.state.resizingSides?.bottom === bottom &&
+      this.state.resizingSides?.left === left &&
+      this.state.resizingSides?.top === top &&
+      this.state.resizingSides?.right === right &&
+      this.state.cursor === newCursor &&
+      this.state.couldResize === Boolean(newCursor)
+    ) {
+      return;
+    }
+
     const resizingSides = {
       bottom,
       left,