HoveredFiberInfo() — react Function Reference

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

Function javascript BabelCompiler Validation

Entity Profile

BabelCompiler→ Validation→ HoveredFiberInfo() — react Function Reference

Dependency Diagram

graph TD
  26286214_bfec_a4fc_1a0f_5f10283eb543["HoveredFiberInfo()"]
  38d38257_86b3_3154_4c21_7fbaf41be1cb["HoveredFiberInfo.js"]
  26286214_bfec_a4fc_1a0f_5f10283eb543 -->|defined in| 38d38257_86b3_3154_4c21_7fbaf41be1cb
  style 26286214_bfec_a4fc_1a0f_5f10283eb543 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/react-devtools-shared/src/devtools/views/Profiler/HoveredFiberInfo.js lines 32–103

export default function HoveredFiberInfo({fiberData}: Props): React.Node {
  const {profilerStore} = useContext(StoreContext);
  const {rootID, selectedCommitIndex} = useContext(ProfilerContext);

  const {id, name} = fiberData;
  const {profilingCache} = profilerStore;

  if (rootID === null || selectedCommitIndex === null) {
    return null;
  }

  const commitIndices = profilingCache.getFiberCommits({
    fiberID: id,
    rootID,
  });

  const {nodes} = profilingCache.getCommitTree({
    rootID,
    commitIndex: selectedCommitIndex,
  });
  const node = nodes.get(id);

  let renderDurationInfo = null;
  let i = 0;
  for (i = 0; i < commitIndices.length; i++) {
    const commitIndex = commitIndices[i];
    if (selectedCommitIndex === commitIndex) {
      const {fiberActualDurations, fiberSelfDurations} =
        profilerStore.getCommitData(((rootID: any): number), commitIndex);
      const actualDuration = fiberActualDurations.get(id) || 0;
      const selfDuration = fiberSelfDurations.get(id) || 0;

      renderDurationInfo = (
        <div key={commitIndex} className={styles.CurrentCommit}>
          <strong>Duration:</strong> {formatDuration(selfDuration)}ms of{' '}
          {formatDuration(actualDuration)}ms
        </div>
      );

      break;
    }
  }

  return (
    <Fragment>
      <div className={styles.Toolbar}>
        <div className={styles.Component}>{name}</div>

        {node != null && (
          <div className={styles.BadgesContainer}>
            <InspectedElementBadges
              hocDisplayNames={node.hocDisplayNames}
              compiledWithForget={node.compiledWithForget}
            />

            {node.compiledWithForget && (
              <div>
                ✨ This component has been auto-memoized by the React Compiler.
              </div>
            )}
          </div>
        )}

        <div className={styles.Content}>
          {renderDurationInfo || <div>Did not client render.</div>}

          <WhatChanged fiberID={id} displayMode="compact" />
        </div>
      </div>
    </Fragment>
  );
}