CommitFlamegraph() — react Function Reference

Architecture documentation for the CommitFlamegraph() function in CommitFlamegraph.js from the react codebase.

Function javascript BabelCompiler Validation

Entity Profile

BabelCompiler→ Validation→ CommitFlamegraph() — react Function Reference

Dependency Diagram

graph TD
  0d1451d1_cdc2_4b91_850a_b1eaf9cc7d3c["CommitFlamegraph()"]
  54e7a598_e83a_4b14_3104_1fa62a034c31["CommitFlamegraph.js"]
  0d1451d1_cdc2_4b91_850a_b1eaf9cc7d3c -->|defined in| 54e7a598_e83a_4b14_3104_1fa62a034c31
  style 0d1451d1_cdc2_4b91_850a_b1eaf9cc7d3c fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/react-devtools-shared/src/devtools/views/Profiler/CommitFlamegraph.js lines 99–192

function CommitFlamegraph({chartData, commitTree, height, width}: Props) {
  const [hoveredFiberData, setHoveredFiberData] =
    useState<TooltipFiberData | null>(null);
  const {lineHeight} = useContext(SettingsContext);
  const {selectFiber, selectedFiberID} = useContext(ProfilerContext);
  const {highlightHostInstance, clearHighlightHostInstance} =
    useHighlightHostInstance();

  const selectedChartNodeIndex = useMemo<number>(() => {
    if (selectedFiberID === null) {
      return 0;
    }
    // The selected node might not be in the tree for this commit,
    // so it's important that we have a fallback plan.
    const depth = chartData.idToDepthMap.get(selectedFiberID);
    return depth !== undefined ? depth - 1 : 0;
  }, [chartData, selectedFiberID]);

  const selectedChartNode = useMemo(() => {
    if (selectedFiberID !== null) {
      return (
        chartData.rows[selectedChartNodeIndex].find(
          chartNode => chartNode.id === selectedFiberID,
        ) || null
      );
    }
    return null;
  }, [chartData, selectedFiberID, selectedChartNodeIndex]);

  const handleElementMouseEnter = useCallback(
    ({id, name}: $FlowFixMe) => {
      highlightHostInstance(id); // Highlight last hovered element.
      setHoveredFiberData({id, name}); // Set hovered fiber data for tooltip
    },
    [highlightHostInstance],
  );

  const handleElementMouseLeave = useCallback(() => {
    clearHighlightHostInstance(); // clear highlighting of element on mouse leave
    setHoveredFiberData(null); // clear hovered fiber data for tooltip
  }, [clearHighlightHostInstance]);

  const itemData = useMemo<ItemData>(
    () => ({
      chartData,
      onElementMouseEnter: handleElementMouseEnter,
      onElementMouseLeave: handleElementMouseLeave,
      scaleX: scale(
        0,
        selectedChartNode !== null
          ? selectedChartNode.treeBaseDuration
          : chartData.baseDuration,
        0,
        width,
      ),
      selectedChartNode,
      selectedChartNodeIndex,
      selectFiber,
      width,
    }),
    [
      chartData,
      handleElementMouseEnter,
      handleElementMouseLeave,
      selectedChartNode,
      selectedChartNodeIndex,
      selectFiber,
      width,
    ],
  );

  // Tooltip used to show summary of fiber info on hover
  const tooltipLabel = useMemo(
    () =>
      hoveredFiberData !== null ? (
        <HoveredFiberInfo fiberData={hoveredFiberData} />
      ) : null,
    [hoveredFiberData],
  );

  return (