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

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
   );
 }