CommitRankedAutoSizer() — react Function Reference

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

Function javascript BabelCompiler Validation

Entity Profile

BabelCompiler→ Validation→ CommitRankedAutoSizer() — react Function Reference

Dependency Diagram

graph TD
  2390cde1_5337_234a_d6e6_8f2d34decceb["CommitRankedAutoSizer()"]
  0ad6c6d5_5d6d_2d8a_d957_e1433af66ea0["CommitRanked.js"]
  2390cde1_5337_234a_d6e6_8f2d34decceb -->|defined in| 0ad6c6d5_5d6d_2d8a_d957_e1433af66ea0
  style 2390cde1_5337_234a_d6e6_8f2d34decceb fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/react-devtools-shared/src/devtools/views/Profiler/CommitRanked.js lines 41–88

export default function CommitRankedAutoSizer(_: {}): React.Node {
  const {profilerStore} = useContext(StoreContext);
  const {rootID, selectedCommitIndex, selectFiber} =
    useContext(ProfilerContext);
  const {profilingCache} = profilerStore;

  const deselectCurrentFiber = useCallback(
    (event: $FlowFixMe) => {
      event.stopPropagation();
      selectFiber(null, null);
    },
    [selectFiber],
  );

  let commitTree: CommitTree | null = null;
  let chartData: ChartData | null = null;
  if (selectedCommitIndex !== null) {
    commitTree = profilingCache.getCommitTree({
      commitIndex: selectedCommitIndex,
      rootID: ((rootID: any): number),
    });

    chartData = profilingCache.getRankedChartData({
      commitIndex: selectedCommitIndex,
      commitTree,
      rootID: ((rootID: any): number),
    });
  }

  if (commitTree != null && chartData != null && chartData.nodes.length > 0) {
    return (
      <div className={styles.Container} onClick={deselectCurrentFiber}>
        <AutoSizer>
          {({height, width}) => (
            <CommitRanked
              chartData={((chartData: any): ChartData)}
              commitTree={((commitTree: any): CommitTree)}
              height={height}
              width={width}
            />
          )}
        </AutoSizer>
      </div>
    );
  } else {
    return <NoCommitData />;
  }
}