fix(MenuGroup): reduce rerenders when opening groups (#1399)

src/core/components/menu/menuGroup.tsx

@@ -1,5 +1,5 @@
 import {ChevronRightIcon} from '@sanity/icons'
-import {isValidElement, useCallback, useEffect, useRef, useState} from 'react'
+import {isValidElement, useCallback, useEffect, useState} from 'react'
 import {isValidElementType} from 'react-is'
 import {useArrayProp} from '../../hooks'
 import {Box, Flex, Popover, PopoverProps, Text} from '../../primitives'
@@ -58,7 +58,7 @@ export function MenuGroup(
   } = menu
   const [rootElement, setRootElement] = useState<HTMLButtonElement | HTMLDivElement | null>(null)
   const [open, setOpen] = useState(false)
-  const shouldFocusRef = useRef<'first' | 'last' | null>(null)
+  const [shouldFocus, setShouldFocus] = useState<'first' | 'last' | null>(null)
   const active = Boolean(activeElement) && activeElement === rootElement
   const [withinMenu, setWithinMenu] = useState(false)
 
@@ -88,22 +88,17 @@ export function MenuGroup(
 
   const handleClick = useCallback(
     (event: React.MouseEvent<HTMLDivElement>) => {
-      if (onClick) onClick(event)
-
-      shouldFocusRef.current = 'first'
+      onClick?.(event)
 
+      setShouldFocus('first')
       setOpen(true)
-
-      requestAnimationFrame(() => {
-        shouldFocusRef.current = null
-      })
     },
     [onClick],
   )
 
   const handleChildItemClick = useCallback(() => {
     setOpen(false)
-    if (onItemClick) onItemClick()
+    onItemClick?.()
   }, [onItemClick])
 
   const handleMenuMouseEnter = useCallback(() => setWithinMenu(true), [])
@@ -121,6 +116,16 @@ export function MenuGroup(
     if (!open) setWithinMenu(false)
   }, [open])
 
+  // Reset the shouldFocus state after it has been used
+  useEffect(() => {
+    if (!shouldFocus) return
+    // The useMenuController effect that handles `shouldFocus` schedules a request animation frame where it's processed.
+    // By doing the same here, we ensure that the reset is processed after the focus change.
+    const rafId = requestAnimationFrame(() => setShouldFocus(null))
+
+    return () => cancelAnimationFrame(rafId)
+  }, [shouldFocus])
+
   const childMenu = (
     <Menu
       onClickOutside={onClickOutside}
@@ -129,7 +134,7 @@ export function MenuGroup(
       onKeyDown={handleMenuKeyDown}
       onMouseEnter={handleMenuMouseEnter}
       registerElement={registerElement}
-      shouldFocus={shouldFocusRef.current}
+      shouldFocus={shouldFocus}
     >
       {children}
     </Menu>
@@ -143,15 +148,10 @@ export function MenuGroup(
     }
 
     if (event.key === 'ArrowRight') {
-      shouldFocusRef.current = 'first'
-
+      setShouldFocus('first')
       setOpen(true)
       setWithinMenu(true)
 
-      requestAnimationFrame(() => {
-        shouldFocusRef.current = null
-      })
-
       return
     }
   }, [])

src/core/components/menu/useMenuController.ts

@@ -184,7 +184,7 @@ export function useMenuController(props: {
   useEffect(() => {
     if (!mounted) return
 
-    const rafId = window.requestAnimationFrame(() => {
+    const rafId = requestAnimationFrame(() => {
       if (activeIndex === -1) {
         if (shouldFocus === 'first') {
           const focusableElements = _getFocusableElements(elementsRef.current)
@@ -194,7 +194,6 @@ export function useMenuController(props: {
             const currentIndex = elementsRef.current.indexOf(el)
 
             setActiveIndex(currentIndex)
-            activeIndexRef.current = currentIndex
           }
         }
 
@@ -206,7 +205,6 @@ export function useMenuController(props: {
             const currentIndex = elementsRef.current.indexOf(el)
 
             setActiveIndex(currentIndex)
-            activeIndexRef.current = currentIndex
           }
         }
 
@@ -218,9 +216,7 @@ export function useMenuController(props: {
       element?.focus()
     })
 
-    return () => {
-      window.cancelAnimationFrame(rafId)
-    }
+    return () => cancelAnimationFrame(rafId)
   }, [activeIndex, mounted, setActiveIndex, shouldFocus])
 
   return {

src/core/components/toast/styles.ts

@@ -14,7 +14,7 @@ const loadingAnimation = keyframes`
   }
   100% {
     width: 100%;
-  } 
+  }
 `
 
 const LOADING_BAR_HEIGHT = 2

src/core/hooks/useClickOutsideEvent.ts

@@ -35,15 +35,13 @@ export function useClickOutsideEvent(
       return
     }
 
-    const resolvedBoundaryElement =
-      typeof boundaryElement === 'function' ? boundaryElement() : boundaryElement
+    const resolvedBoundaryElement = boundaryElement?.()
 
     if (resolvedBoundaryElement && !resolvedBoundaryElement.contains(target)) {
       return
     }
 
-    const resolvedElements = Array.isArray(elementsArg) ? elementsArg : elementsArg()
-    const elements = resolvedElements.flat()
+    const elements = elementsArg().flat()
 
     for (const el of elements) {
       if (!el) continue