From 0227a7ab8aed18651eab72b68921dcce37e0a345 Mon Sep 17 00:00:00 2001
From: Michel Weststrate <mweststrate@fb.com>
Date: Mon, 17 May 2021 05:31:42 -0700
Subject: [PATCH] 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 | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/desktop/flipper-plugin/src/ui/Interactive.tsx b/desktop/flipper-plugin/src/ui/Interactive.tsx
index b9e52715e..7216d4cfc 100644
--- a/desktop/flipper-plugin/src/ui/Interactive.tsx
+++ b/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,