Profiler() — react Function Reference

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

Function javascript BabelCompiler Validation

Entity Profile

BabelCompiler→ Validation→ Profiler() — react Function Reference

Dependency Diagram

graph TD
  2f16f870_123e_9558_ebe4_b2572ca1bd37["Profiler()"]
  2e59ff66_9c56_6e37_8843_8e474e6b0d70["Profiler.js"]
  2f16f870_123e_9558_ebe4_b2572ca1bd37 -->|defined in| 2e59ff66_9c56_6e37_8843_8e474e6b0d70
  style 2f16f870_123e_9558_ebe4_b2572ca1bd37 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/react-devtools-shared/src/devtools/views/Profiler/Profiler.js lines 40–209

function Profiler(_: {}) {
  const profilerRef = useRef<HTMLDivElement | null>(null);
  const isMac =
    typeof navigator !== 'undefined' &&
    navigator.platform.toUpperCase().indexOf('MAC') >= 0;

  const {
    didRecordCommits,
    isProcessingData,
    isProfiling,
    selectedCommitIndex,
    selectedFiberID,
    selectedTabID,
    selectTab,
    supportsProfiling,
    startProfiling,
    stopProfiling,
    selectPrevCommitIndex,
    selectNextCommitIndex,
  } = useContext(ProfilerContext);

  const {file: timelineTraceEventData, searchInputContainerRef} =
    useContext(TimelineContext);

  const {supportsTimeline} = useContext(StoreContext);

  const isLegacyProfilerSelected = selectedTabID !== 'timeline';

  const handleKeyDown = useEffectEvent((event: KeyboardEvent) => {
    const correctModifier = isMac ? event.metaKey : event.ctrlKey;
    // Cmd+E to start/stop profiler recording
    if (correctModifier && event.key === 'e') {
      if (isProfiling) {
        stopProfiling();
      } else {
        startProfiling();
      }
      event.preventDefault();
      event.stopPropagation();
    } else if (
      isLegacyProfilerSelected &&
      didRecordCommits &&
      selectedCommitIndex !== null
    ) {
      // Cmd+Left/Right (Mac) or Ctrl+Left/Right (Windows/Linux) to navigate commits
      if (
        correctModifier &&
        (event.key === 'ArrowLeft' || event.key === 'ArrowRight')
      ) {
        if (event.key === 'ArrowLeft') {
          selectPrevCommitIndex();
        } else {
          selectNextCommitIndex();
        }
        event.preventDefault();
        event.stopPropagation();
      }
    }
  });

  useEffect(() => {
    const div = profilerRef.current;
    if (!div) {
      return;
    }
    const ownerWindow = div.ownerDocument.defaultView;
    ownerWindow.addEventListener('keydown', handleKeyDown);
    return () => {
      ownerWindow.removeEventListener('keydown', handleKeyDown);
    };
  }, []);

  let view = null;
  if (didRecordCommits || selectedTabID === 'timeline') {
    switch (selectedTabID) {
      case 'flame-chart':
        view = <CommitFlamegraph />;
        break;
      case 'ranked-chart':
        view = <CommitRanked />;
        break;