Removed 'isHovered' bool; fixed broken memoization

Author: Brian Vaughn

packages/react-devtools-shared/src/devtools/views/Profiler/ChartNode.js

@@ -15,7 +15,6 @@ type Props = {|
   color: string,
   height: number,
   isDimmed?: boolean,
-  isHovered?: boolean,
   label: string,
   onClick: (event: SyntheticMouseEvent<*>) => mixed,
   onDoubleClick?: (event: SyntheticMouseEvent<*>) => mixed,
@@ -34,7 +33,6 @@ export default function ChartNode({
   color,
   height,
   isDimmed = false,
-  isHovered = false,
   label,
   onClick,
   onMouseEnter,
@@ -57,7 +55,7 @@ export default function ChartNode({
         onDoubleClick={onDoubleClick}
         className={styles.Rect}
         style={{
-          opacity: isHovered ? 0.75 : isDimmed ? 0.5 : 1,
+          opacity: isDimmed ? 0.5 : 1,
         }}
       />
       {width >= minWidthToDisplay && (

packages/react-devtools-shared/src/devtools/views/Profiler/CommitFlamegraph.js

@@ -29,7 +29,6 @@ import type {CommitTree} from './types';
 
 export type ItemData = {|
   chartData: ChartData,
-  isHovered: boolean,
   onElementMouseEnter: (fiberData: TooltipFiberData) => void,
   onElementMouseLeave: () => void,
   scaleX: (value: number, fallbackValue: number) => number,
@@ -131,20 +130,22 @@ function CommitFlamegraph({chartData, commitTree, height, width}: Props) {
     return null;
   }, [chartData, selectedFiberID, selectedChartNodeIndex]);
 
-  const handleElementMouseEnter = ({id, name}) => {
-    highlightNativeElement(id); // Highlight last hovered element.
-    setHoveredFiberData({id, name}); // Set hovered fiber data for tooltip
-  };
+  const handleElementMouseEnter = useCallback(
+    ({id, name}) => {
+      highlightNativeElement(id); // Highlight last hovered element.
+      setHoveredFiberData({id, name}); // Set hovered fiber data for tooltip
+    },
+    [highlightNativeElement],
+  );
 
-  const handleElementMouseLeave = () => {
+  const handleElementMouseLeave = useCallback(() => {
     clearHighlightNativeElement(); // clear highlighting of element on mouse leave
     setHoveredFiberData(null); // clear hovered fiber data for tooltip
-  };
+  }, [clearHighlightNativeElement]);
 
   const itemData = useMemo<ItemData>(
     () => ({
       chartData,
-      isHovered: hoveredFiberData !== null,
       onElementMouseEnter: handleElementMouseEnter,
       onElementMouseLeave: handleElementMouseLeave,
       scaleX: scale(
@@ -162,7 +163,6 @@ function CommitFlamegraph({chartData, commitTree, height, width}: Props) {
     }),
     [
       chartData,
-      hoveredFiberData,
       handleElementMouseEnter,
       handleElementMouseLeave,
       selectedChartNode,

packages/react-devtools-shared/src/devtools/views/Profiler/CommitFlamegraphListItem.js

@@ -28,7 +28,6 @@ type Props = {
 function CommitFlamegraphListItem({data, index, style}: Props) {
   const {
     chartData,
-    isHovered,
     onElementMouseEnter,
     onElementMouseLeave,
     scaleX,
@@ -116,7 +115,6 @@ function CommitFlamegraphListItem({data, index, style}: Props) {
             color={color}
             height={lineHeight}
             isDimmed={index < selectedChartNodeIndex}
-            isHovered={isHovered}
             key={id}
             label={label}
             onClick={event => handleClick(event, id, name)}

packages/react-devtools-shared/src/devtools/views/Profiler/CommitRanked.js

@@ -29,7 +29,6 @@ import type {CommitTree} from './types';
 
 export type ItemData = {|
   chartData: ChartData,
-  isHovered: boolean,
   onElementMouseEnter: (fiberData: TooltipFiberData) => void,
   onElementMouseLeave: () => void,
   scaleX: (value: number, fallbackValue: number) => number,
@@ -113,20 +112,22 @@ function CommitRanked({chartData, commitTree, height, width}: Props) {
     [chartData, selectedFiberID],
   );
 
-  const handleElementMouseEnter = ({id, name}) => {
-    highlightNativeElement(id); // Highlight last hovered element.
-    setHoveredFiberData({id, name}); // Set hovered fiber data for tooltip
-  };
+  const handleElementMouseEnter = useCallback(
+    ({id, name}) => {
+      highlightNativeElement(id); // Highlight last hovered element.
+      setHoveredFiberData({id, name}); // Set hovered fiber data for tooltip
+    },
+    [highlightNativeElement],
+  );
 
-  const handleElementMouseLeave = () => {
+  const handleElementMouseLeave = useCallback(() => {
     clearHighlightNativeElement(); // clear highlighting of element on mouse leave
     setHoveredFiberData(null); // clear hovered fiber data for tooltip
-  };
+  }, [clearHighlightNativeElement]);
 
   const itemData = useMemo<ItemData>(
     () => ({
       chartData,
-      isHovered: hoveredFiberData !== null,
       onElementMouseEnter: handleElementMouseEnter,
       onElementMouseLeave: handleElementMouseLeave,
       scaleX: scale(0, chartData.nodes[selectedFiberIndex].value, 0, width),
@@ -137,7 +138,6 @@ function CommitRanked({chartData, commitTree, height, width}: Props) {
     }),
     [
       chartData,
-      hoveredFiberData,
       handleElementMouseEnter,
       handleElementMouseLeave,
       selectedFiberID,

packages/react-devtools-shared/src/devtools/views/Profiler/CommitRankedListItem.js

@@ -27,7 +27,6 @@ type Props = {
 function CommitRankedListItem({data, index, style}: Props) {
   const {
     chartData,
-    isHovered,
     onElementMouseEnter,
     onElementMouseLeave,
     scaleX,
@@ -69,7 +68,6 @@ function CommitRankedListItem({data, index, style}: Props) {
       color={getGradientColor(node.value / chartData.maxValue)}
       height={lineHeight}
       isDimmed={index < selectedFiberIndex}
-      isHovered={isHovered}
       key={node.id}
       label={node.label}
       onClick={handleClick}