From 9101603cf22b50b0eec35d0e46a5cf9079edb7a4 Mon Sep 17 00:00:00 2001
From: Luke De Feo <lukedefeo@fb.com>
Date: Wed, 28 Sep 2022 06:51:13 -0700
Subject: [PATCH] New nested hover implementation optimization

Summary:
A side affect of the new tree implementation was unecessary renders. For very large trees this was noticable to the user.

A condition is added to the props are equal function for the memoized component to consider if this nodes path is a prefix to the new or previous hover path. This indicates whether it needs to rerender or wether the change in hover state is unconsequential to this component.

changelog: Fixed a bug in the nested highlighting of the data inspector, previously it could remain highlighted while moving the mouse away quickly and multiple highlights could be visible at the same time

Reviewed By: mweststrate

Differential Revision: D39883905

fbshipit-source-id: abdac71574695000addb4ba6477503b7d44a4faf
---
 .../src/ui/data-inspector/DataInspectorNode.tsx    | 14 +++++++++++++-
 1 file changed, 13 insertions(+), 1 deletion(-)

diff --git a/desktop/flipper-plugin/src/ui/data-inspector/DataInspectorNode.tsx b/desktop/flipper-plugin/src/ui/data-inspector/DataInspectorNode.tsx
index 562b25028..cb6a23fe7 100644
--- a/desktop/flipper-plugin/src/ui/data-inspector/DataInspectorNode.tsx
+++ b/desktop/flipper-plugin/src/ui/data-inspector/DataInspectorNode.tsx
@@ -718,6 +718,18 @@ function dataInspectorPropsAreEqual(
     }
   }
 
+  const nodePath = (
+    props.name === undefined
+      ? props.parentPath
+      : props.parentPath.concat([props.name])
+  ).join('.');
+
+  //if the node is a prefix then we of the hovered path(s) then we *should* render this branch of the tree
+  //Otherwise we don't need to rerender since this node is not changing hover state
+  const nodePathIsPrefixOfCurrentOrNextHoverPath =
+    nextProps.hoveredNodePath?.startsWith(nodePath) ||
+    props.hoveredNodePath?.startsWith(nodePath);
+
   // basic equality checks for the rest
   return (
     nextProps.data === props.data &&
@@ -730,7 +742,7 @@ function dataInspectorPropsAreEqual(
     nextProps.setValue === props.setValue &&
     nextProps.collapsed === props.collapsed &&
     nextProps.expandRoot === props.expandRoot &&
-    nextProps.hoveredNodePath === props.hoveredNodePath
+    !nodePathIsPrefixOfCurrentOrNextHoverPath
   );
 }