perf: Improve performance of rendering context menus

app/components/ContextMenu/index.tsx

@@ -57,11 +57,6 @@ const ContextMenu: React.FC<Props> = ({
   ...rest
 }: Props) => {
   const previousVisible = usePrevious(rest.visible);
-  const maxHeight = useMenuHeight({
-    visible: rest.visible,
-    elementRef: rest.unstable_disclosureRef,
-  });
-  const backgroundRef = React.useRef<HTMLDivElement>(null);
   const { ui } = useStores();
   const { t } = useTranslation();
   const { setIsMenuOpen } = useMenuContext();
@@ -99,21 +94,6 @@ const ContextMenu: React.FC<Props> = ({
     t,
   ]);
 
-  // We must manually manage scroll lock for iOS support so that the scrollable
-  // element can be passed into body-scroll-lock. See:
-  // https://github.com/ariakit/ariakit/issues/469
-  React.useEffect(() => {
-    const scrollElement = backgroundRef.current;
-    if (rest.visible && scrollElement && !isSubMenu) {
-      disableBodyScroll(scrollElement, {
-        reserveScrollBarGap: true,
-      });
-    }
-    return () => {
-      scrollElement && !isSubMenu && enableBodyScroll(scrollElement);
-    };
-  }, [isSubMenu, rest.visible]);
-
   // Perf win – don't render anything until the menu has been opened
   if (!rest.visible && !previousVisible) {
     return null;
@@ -124,51 +104,94 @@ const ContextMenu: React.FC<Props> = ({
   return (
     <>
       <Menu hideOnClickOutside={!isMobile} preventBodyScroll={false} {...rest}>
-        {(props) => {
-          // kind of hacky, but this is an effective way of telling which way
-          // the menu will _actually_ be placed when taking into account screen
-          // positioning.
-          const topAnchor = props.style?.top === "0";
-          // @ts-expect-error ts-migrate(2339) FIXME: Property 'placement' does not exist on type 'Extra... Remove this comment to see the full error message
-          const rightAnchor = props.placement === "bottom-end";
-
-          return (
-            <>
-              {isMobile && (
-                <Backdrop
-                  onClick={(ev) => {
-                    ev.preventDefault();
-                    ev.stopPropagation();
-                    rest.hide?.();
-                  }}
-                />
-              )}
-              <Position {...props}>
-                <Background
-                  dir="auto"
-                  topAnchor={topAnchor}
-                  rightAnchor={rightAnchor}
-                  ref={backgroundRef}
-                  hiddenScrollbars
-                  style={
-                    topAnchor && !isMobile
-                      ? {
-                          maxHeight,
-                        }
-                      : undefined
-                  }
-                >
-                  {rest.visible || rest.animating ? children : null}
-                </Background>
-              </Position>
-            </>
-          );
-        }}
+        {(props) => (
+          <InnerContextMenu
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            menuProps={props as any}
+            {...rest}
+            isSubMenu={isSubMenu}
+          >
+            {children}
+          </InnerContextMenu>
+        )}
       </Menu>
     </>
   );
 };
 
+type InnerContextMenuProps = MenuStateReturn & {
+  isSubMenu: boolean;
+  menuProps: { style?: React.CSSProperties; placement: string };
+  children: React.ReactNode;
+};
+
+/**
+ * Inner context menu allows deferring expensive window measurement hooks etc
+ * until the menu is actually opened.
+ */
+const InnerContextMenu = (props: InnerContextMenuProps) => {
+  const { menuProps } = props;
+  // kind of hacky, but this is an effective way of telling which way
+  // the menu will _actually_ be placed when taking into account screen
+  // positioning.
+  const topAnchor = menuProps.style?.top === "0";
+  const rightAnchor = menuProps.placement === "bottom-end";
+  const backgroundRef = React.useRef<HTMLDivElement>(null);
+  const isMobile = useMobile();
+
+  const maxHeight = useMenuHeight({
+    visible: props.visible,
+    elementRef: props.unstable_disclosureRef,
+  });
+
+  // We must manually manage scroll lock for iOS support so that the scrollable
+  // element can be passed into body-scroll-lock. See:
+  // https://github.com/ariakit/ariakit/issues/469
+  React.useEffect(() => {
+    const scrollElement = backgroundRef.current;
+    if (props.visible && scrollElement && !props.isSubMenu) {
+      disableBodyScroll(scrollElement, {
+        reserveScrollBarGap: true,
+      });
+    }
+    return () => {
+      scrollElement && !props.isSubMenu && enableBodyScroll(scrollElement);
+    };
+  }, [props.isSubMenu, props.visible]);
+
+  return (
+    <>
+      {isMobile && (
+        <Backdrop
+          onClick={(ev) => {
+            ev.preventDefault();
+            ev.stopPropagation();
+            props.hide?.();
+          }}
+        />
+      )}
+      <Position {...menuProps}>
+        <Background
+          dir="auto"
+          topAnchor={topAnchor}
+          rightAnchor={rightAnchor}
+          ref={backgroundRef}
+          hiddenScrollbars
+          style={
+            topAnchor && !isMobile
+              ? {
+                  maxHeight,
+                }
+              : undefined
+          }
+        >
+          {props.visible || props.animating ? props.children : null}
+        </Background>
+      </Position>
+    </>
+  );
+};
+
 export default ContextMenu;
 
 export const Backdrop = styled.div`