Repository: facebook/react
File: packages/react-devtools-shared/src/devtools/views/Profiler/Profiler.js (JavaScript)

Code before:

  const {supportsTimeline} = useContext(StoreContext);

  const isLegacyProfilerSelected = selectedTabID !== 'timeline';

  // Cmd+E to start/stop profiler recording
  useEffect(() => {
    const div = profilerRef.current;
    if (div === null) {
      return;
    }

    const ownerWindow = div.ownerDocument.defaultView;
    const isMac = navigator.platform.toUpperCase().indexOf('MAC') >= 0;
    const handleKeyDown = (event: KeyboardEvent) => {
      const correctModifier = isMac ? event.metaKey : event.ctrlKey;
      if (correctModifier && event.key === 'e') {
        if (isProfiling) {
          stopProfiling();
        } else {
          startProfiling();
        }
        event.preventDefault();
        event.stopPropagation();
      }
    };

    ownerWindow.addEventListener('keydown', handleKeyDown);
    return () => {
      ownerWindow.removeEventListener('keydown', handleKeyDown);
    };
  }, [isProfiling, startProfiling, stopProfiling]);

  let view = null;
  if (didRecordCommits || selectedTabID === 'timeline') {
    switch (selectedTabID) {
      case 'flame-chart':
        view = <CommitFlamegraph />;
        break;
      case 'ranked-chart':
        view = <CommitRanked />;
        break;
      case 'timeline':
        view = <Timeline />;
        break;
      default:
        break;
    }
  } else if (isProfiling) {
    view = <RecordingInProgress />;
  } else if (isProcessingData) {

Review comment (refactor):
I think this could be extracted into [`useEffectEvent`](https://react.dev/reference/react/useEffectEvent)?

This will allow us to subscribe to window events once, when the element is mounted. With the current implementation we will resubscribe every time profiling status changes.

Code after:

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

  const {supportsTimeline} = useContext(StoreContext);

  const isLegacyProfilerSelected = selectedTabID !== 'timeline';

  // Cmd+E to start/stop profiler recording
  const handleKeyDown = useEffectEvent((event: KeyboardEvent) => {
    const correctModifier = isMac ? event.metaKey : event.ctrlKey;
    if (correctModifier && event.key === 'e') {
      if (isProfiling) {
        stopProfiling();
      } else {
        startProfiling();
      }
      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;
      case 'timeline':
        view = <Timeline />;
        break;
      default:
        break;
    }
  } else if (isProfiling) {
    view = <RecordingInProgress />;