[DevTools] Fix null ref crash in ContextMenu when items list is empty

packages/react-devtools-shared/src/devtools/ContextMenu/ContextMenu.js

@@ -8,15 +8,14 @@
  */
 
 import * as React from 'react';
-import {useLayoutEffect, createRef} from 'react';
+import {useLayoutEffect} from 'react';
 import {createPortal} from 'react-dom';
 
 import ContextMenuItem from './ContextMenuItem';
 
 import type {
   ContextMenuItem as ContextMenuItemType,
   ContextMenuPosition,
-  ContextMenuRef,
 } from './types';
 
 import styles from './ContextMenu.css';
@@ -49,15 +48,13 @@ type Props = {
   items: ContextMenuItemType[],
   position: ContextMenuPosition,
   hide: () => void,
-  ref?: ContextMenuRef,
 };
 
 export default function ContextMenu({
   anchorElementRef,
   position,
   items,
   hide,
-  ref = createRef(),
 }: Props): React.Node {
   // This works on the assumption that ContextMenu component is only rendered when it should be shown
   const anchor = anchorElementRef.current;
@@ -73,8 +70,21 @@ export default function ContextMenu({
     '[data-react-devtools-portal-root]',
   );
 
+  const hideMenu = portalContainer == null || items.length === 0;
+  const menuRef = React.useRef<HTMLDivElement | null>(null);
+
   useLayoutEffect(() => {
-    const menu = ((ref.current: any): HTMLElement);
+    // Match the early-return condition below.
+    if (hideMenu) {
+      return;
+    }
+    const maybeMenu = menuRef.current;
+    if (maybeMenu === null) {
+      throw new Error(
+        "Can't access context menu element. This is a bug in React DevTools.",
+      );
+    }
+    const menu = (maybeMenu: HTMLDivElement);
 
     function hideUnlessContains(event: Event) {
       if (!menu.contains(((event.target: any): Node))) {
@@ -98,14 +108,14 @@ export default function ContextMenu({
 
       ownerWindow.removeEventListener('resize', hide);
     };
-  }, []);
+  }, [hideMenu]);
 
-  if (portalContainer == null || items.length === 0) {
+  if (hideMenu) {
     return null;
   }
 
   return createPortal(
-    <div className={styles.ContextMenu} ref={ref}>
+    <div className={styles.ContextMenu} ref={menuRef}>
       {items.map(({onClick, content}, index) => (
         <ContextMenuItem key={index} onClick={onClick} hide={hide}>
           {content}

packages/react-devtools-shared/src/devtools/ContextMenu/ContextMenuContainer.js

@@ -53,7 +53,6 @@ export default function ContextMenuContainer({
       position={position}
       hide={hide}
       items={items}
-      ref={ref}
     />
   );
 }