fix(performance): improve useArrayProp memoization

.eslintrc.js

@@ -36,8 +36,6 @@ module.exports = {
   ],
   rules: {
     '@typescript-eslint/explicit-module-boundary-types': 'error',
-    '@typescript-eslint/interface-name-prefix': 'off',
-    '@typescript-eslint/member-delimiter-style': 'off',
     '@typescript-eslint/no-empty-interface': 'off',
     'boundaries/element-types': [
       'error',
@@ -76,17 +74,6 @@ module.exports = {
     ],
     'no-console': 'error',
     'no-warning-comments': ['warn', {location: 'start', terms: ['todo', '@todo', 'fixme']}],
-    'padding-line-between-statements': [
-      'warn',
-      {blankLine: 'always', prev: '*', next: 'block'},
-      {blankLine: 'always', prev: '*', next: 'block-like'},
-      {blankLine: 'always', prev: 'const', next: 'expression'},
-      {blankLine: 'always', prev: 'let', next: 'expression'},
-      {blankLine: 'always', prev: 'var', next: 'expression'},
-      {blankLine: 'always', prev: 'block', next: '*'},
-      {blankLine: 'always', prev: 'block-like', next: '*'},
-      {blankLine: 'always', prev: '*', next: 'return'},
-    ],
     'react/prop-types': 'off',
     'react-hooks/exhaustive-deps': 'error', // Checks effect dependencies
     'react-hooks/rules-of-hooks': 'error', // Checks rules of Hooks

.github/workflows/main.yml

@@ -38,7 +38,7 @@ jobs:
       - run: pnpm install
       - name: Register Problem Matcher for ESLint that handles -f compact and shows warnings and errors inline on PRs
         run: echo "::add-matcher::.github/eslint-compact.json"
-      - run: "pnpm lint -f compact --rule 'no-warning-comments: [off]' --max-warnings 33"
+      - run: "pnpm lint -f compact --rule 'no-warning-comments: [off]' --max-warnings 27"
 
   test:
     needs: [build]

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sanity/ui",
-  "version": "2.8.23",
+  "version": "2.8.24-canary.2",
   "keywords": [
     "sanity",
     "ui",

src/core/components/autocomplete/autocomplete.tsx

@@ -20,7 +20,7 @@
 } from 'react'
 import {EMPTY_ARRAY, EMPTY_RECORD} from '../../constants'
 import {_hasFocus, _raf, focusFirstDescendant} from '../../helpers'
-import {useArrayProp} from '../../hooks'
+import {useArrayProp} from '../../hooks/useArrayProp'
 import {
   Box,
   BoxProps,
@@ -97,7 +97,7 @@
 const DEFAULT_FILTER_OPTION = (query: string, option: BaseAutocompleteOption) =>
   option.value.toLowerCase().indexOf(query.toLowerCase()) > -1
 
 const InnerAutocomplete = forwardRef(function InnerAutocomplete<
   Option extends BaseAutocompleteOption,
 >(
   props: AutocompleteProps<Option> &
@@ -632,14 +632,14 @@
   const results = useMemo(() => {
     if (renderPopover) {
       return renderPopover(
         {
           content,
           hidden: !expanded,
           inputElement: inputElementRef.current,
           onMouseEnter: handlePopoverMouseEnter,
           onMouseLeave: handlePopoverMouseLeave,
         },
         resultsPopoverElementRef,
       )
     }
 
@@ -662,7 +662,7 @@
         portal
         radius={radius}
         ref={resultsPopoverElementRef}
         referenceElement={inputElementRef.current}
         {...popover}
       />
     )

src/core/components/breadcrumbs/breadcrumbs.tsx

@@ -8,7 +8,8 @@
   useRef,
   useState,
 } from 'react'
-import {useArrayProp, useClickOutsideEvent} from '../../hooks'
+import {useClickOutsideEvent} from '../../hooks'
+import {useArrayProp} from '../../hooks/useArrayProp'
 import {Box, Popover, Stack, Text} from '../../primitives'
 import {ExpandButton, Root} from './breadcrumbs.styles'
 
@@ -24,7 +25,7 @@
 /**
  * @beta
  */
 export const Breadcrumbs = forwardRef(function Breadcrumbs(
   props: BreadcrumbsProps & Omit<React.HTMLProps<HTMLOListElement>, 'as' | 'ref' | 'type'>,
   ref: React.ForwardedRef<HTMLOListElement>,
 ) {

src/core/components/dialog/dialog.tsx

@@ -8,12 +8,8 @@ import {
   focusLastDescendant,
   isHTMLElement,
 } from '../../helpers'
-import {
-  useArrayProp,
-  useClickOutsideEvent,
-  useGlobalKeyDown,
-  usePrefersReducedMotion,
-} from '../../hooks'
+import {useClickOutsideEvent, useGlobalKeyDown, usePrefersReducedMotion} from '../../hooks'
+import {useArrayProp} from '../../hooks/useArrayProp'
 import {Box, Button, Card, Container, Flex, Text} from '../../primitives'
 import {ResponsivePaddingProps, ResponsiveWidthProps} from '../../primitives/types'
 import {responsivePaddingStyle, ResponsivePaddingStyleProps} from '../../styles/internal'

src/core/components/hotkeys/hotkeys.tsx

@@ -1,6 +1,6 @@
 import {forwardRef} from 'react'
 import {styled} from 'styled-components'
-import {useArrayProp} from '../../hooks'
+import {useArrayProp} from '../../hooks/useArrayProp'
 import {Inline, KBD} from '../../primitives'
 import {Radius} from '../../types'
 

src/core/components/menu/menuGroup.tsx

@@ -1,7 +1,7 @@
 import {ChevronRightIcon} from '@sanity/icons'
 import {isValidElement, useCallback, useEffect, useState} from 'react'
 import {isValidElementType} from 'react-is'
-import {useArrayProp} from '../../hooks'
+import {useArrayProp} from '../../hooks/useArrayProp'
 import {Box, Flex, Popover, PopoverProps, Text} from '../../primitives'
 import {Selectable} from '../../primitives/_selectable'
 import {useRootTheme} from '../../theme'

src/core/components/menu/menuItem.tsx

@@ -9,7 +9,7 @@ import {
   useState,
 } from 'react'
 import {isValidElementType} from 'react-is'
-import {useArrayProp} from '../../hooks'
+import {useArrayProp} from '../../hooks/useArrayProp'
 import {Box, Flex, Text} from '../../primitives'
 import {Selectable} from '../../primitives/_selectable'
 import {ResponsivePaddingProps, ResponsiveRadiusProps} from '../../primitives/types'

src/core/components/skeleton/skeleton.tsx

@@ -1,6 +1,6 @@
 import {forwardRef, useEffect, useState} from 'react'
 import {styled} from 'styled-components'
-import {useArrayProp} from '../../hooks'
+import {useArrayProp} from '../../hooks/useArrayProp'
 import {Box} from '../../primitives'
 import {BoxProps, ResponsiveRadiusProps} from '../../primitives'
 import {responsiveRadiusStyle, ResponsiveRadiusStyleProps} from '../../styles/internal'

src/core/components/skeleton/textSkeleton.tsx

@@ -1,7 +1,7 @@
 import {ThemeFontKey, getTheme_v2} from '@sanity/ui/theme'
 import {forwardRef} from 'react'
 import {styled} from 'styled-components'
-import {useArrayProp} from '../../hooks'
+import {useArrayProp} from '../../hooks/useArrayProp'
 import {ThemeProps, _responsive} from '../../styles'
 import {Skeleton, SkeletonProps} from './skeleton'
 

src/core/hooks/index.ts

@@ -1,4 +1,4 @@
-export * from './useArrayProp'
+export * from './useArrayPropLegacy'
 export * from './useClickOutside'
 export * from './useClickOutsideEvent'
 export * from './useCustomValidity'

src/core/hooks/useArrayProp.ts

@@ -10,21 +10,23 @@ export type ArrayPropPrimitive = string | number | boolean | undefined | null
  */
 export function useArrayProp<T extends ArrayPropPrimitive = ArrayPropPrimitive>(
   val: T | T[] | undefined,
-  defaultVal?: T[],
 ): T[] {
   const [[cachedVal, cachedHash], setCache] = useState<[T[], string]>(() => [
-    _getArrayProp(val, defaultVal),
-    JSON.stringify(val ?? defaultVal),
+    _getArrayProp(val),
+    JSON.stringify(val),
   ])
+  let result = cachedVal
 
-  const hash = JSON.stringify(val ?? defaultVal)
+  const hash = JSON.stringify(val)
 
   if (hash !== cachedHash) {
+    const current = _getArrayProp(val)
     // If the cached hash has changed, update the cache right away.
     // Calling setState during render is fine in this case, and preferred over a useEffect loop
     // https://19.react.dev/learn/you-might-not-need-an-effect#adjusting-some-state-when-a-prop-changes
-    setCache([_getArrayProp(val, defaultVal), hash])
+    setCache([current, hash])
+    result = current
   }
 
-  return cachedVal
+  return result
 }

src/core/hooks/useArrayPropLegacy.ts

@@ -0,0 +1,30 @@
+import {useArrayProp as useArrayPropHook, type ArrayPropPrimitive} from './useArrayProp'
+
+export type {ArrayPropPrimitive}
+
+/**
+ * This API might change. DO NOT USE IN PRODUCTION.
+ * @beta
+ */
+export function useArrayProp<T extends ArrayPropPrimitive = ArrayPropPrimitive>(
+  val: T | T[] | undefined,
+): T[]
+/**
+ * This API might change. DO NOT USE IN PRODUCTION.
+ * @beta
+ * @deprecated - use `useArrayProp(value ?? defaultValue)` instead of `useArrayProp(value, defaultValue)`
+ */
+export function useArrayProp<T extends ArrayPropPrimitive = ArrayPropPrimitive>(
+  val: T | T[] | undefined,
+  defaultVal: T[],
+): T[]
+/**
+ * This API might change. DO NOT USE IN PRODUCTION.
+ * @beta
+ */
+export function useArrayProp<T extends ArrayPropPrimitive = ArrayPropPrimitive>(
+  val: T | T[] | undefined,
+  defaultVal?: T[],
+): T[] {
+  return useArrayPropHook(val ?? defaultVal)
+}

src/core/primitives/avatar/avatar.tsx

@@ -2,7 +2,7 @@ import {ThemeColorAvatarColorKey} from '@sanity/ui/theme'
 import {forwardRef, useCallback, useEffect, useId, useMemo, useState} from 'react'
 import ReactIs from 'react-is'
 import {styled} from 'styled-components'
-import {useArrayProp} from '../../hooks'
+import {useArrayProp} from '../../hooks/useArrayProp'
 import {useTheme_v2} from '../../theme'
 import {AvatarPosition, AvatarSize, AvatarStatus} from '../../types'
 import {Label} from '../label'

src/core/primitives/avatar/avatarCounter.tsx

@@ -2,7 +2,7 @@ import {getTheme_v2} from '@sanity/ui/theme'
 import {forwardRef, useMemo} from 'react'
 import {styled, css} from 'styled-components'
 import {EMPTY_RECORD} from '../../constants'
-import {useArrayProp} from '../../hooks'
+import {useArrayProp} from '../../hooks/useArrayProp'
 import {rem, _responsive, ThemeProps} from '../../styles'
 import {AvatarSize} from '../../types'
 import {Label} from '../label'

src/core/primitives/avatar/avatarStack.tsx

@@ -2,7 +2,7 @@ import {getTheme_v2} from '@sanity/ui/theme'
 import {Children, cloneElement, forwardRef, isValidElement} from 'react'
 import {styled, css} from 'styled-components'
 import {EMPTY_RECORD} from '../../constants'
-import {useArrayProp} from '../../hooks'
+import {useArrayProp} from '../../hooks/useArrayProp'
 import {rem, _responsive, ThemeProps} from '../../styles'
 import {AvatarSize} from '../../types'
 import {AvatarCounter} from './avatarCounter'

src/core/primitives/badge/badge.tsx

@@ -1,6 +1,6 @@
 import {forwardRef} from 'react'
 import {styled} from 'styled-components'
-import {useArrayProp} from '../../hooks'
+import {useArrayProp} from '../../hooks/useArrayProp'
 import {responsiveRadiusStyle, ResponsiveRadiusStyleProps} from '../../styles/internal'
 import {BadgeMode, BadgeTone} from '../../types'
 import {Box, BoxProps} from '../box'

src/core/primitives/box/box.tsx

@@ -1,6 +1,6 @@
 import {forwardRef} from 'react'
 import {styled} from 'styled-components'
-import {useArrayProp} from '../../hooks'
+import {useArrayProp} from '../../hooks/useArrayProp'
 import {
   boxStyle,
   flexItemStyle,

src/core/primitives/button/button.tsx

@@ -1,7 +1,7 @@
 import {forwardRef, isValidElement, useMemo} from 'react'
 import {isValidElementType} from 'react-is'
 import {styled} from 'styled-components'
-import {useArrayProp} from '../../hooks'
+import {useArrayProp} from '../../hooks/useArrayProp'
 import {ThemeProps} from '../../styles'
 import {responsiveRadiusStyle, ResponsiveRadiusStyleProps} from '../../styles/internal'
 import {useTheme_v2} from '../../theme'

src/core/primitives/card/card.tsx

@@ -2,7 +2,7 @@ import {ThemeColorSchemeKey} from '@sanity/ui/theme'
 import {forwardRef} from 'react'
 import {isValidElementType} from 'react-is'
 import {styled} from 'styled-components'
-import {useArrayProp} from '../../hooks'
+import {useArrayProp} from '../../hooks/useArrayProp'
 import {
   responsiveBorderStyle,
   ResponsiveBorderStyleProps,

src/core/primitives/code/code.tsx

@@ -2,7 +2,7 @@
 import {forwardRef} from 'react'
 import Refractor from 'react-refractor'
 import {styled} from 'styled-components'
-import {useArrayProp} from '../../hooks'
+import {useArrayProp} from '../../hooks/useArrayProp'
 import {responsiveCodeFontStyle, ResponsiveFontStyleProps} from '../../styles/internal'
 import {codeBaseStyle} from './styles'
 

src/core/primitives/container/container.tsx

@@ -1,6 +1,6 @@
 import {forwardRef} from 'react'
 import {styled} from 'styled-components'
-import {useArrayProp} from '../../hooks'
+import {useArrayProp} from '../../hooks/useArrayProp'
 import {Box, BoxProps} from '../box'
 import {ResponsiveWidthProps} from '../types'
 import {containerBaseStyle, responsiveContainerWidthStyle} from './styles'

src/core/primitives/flex/flex.tsx

@@ -1,6 +1,6 @@
 import {forwardRef} from 'react'
 import {styled} from 'styled-components'
-import {useArrayProp} from '../../hooks'
+import {useArrayProp} from '../../hooks/useArrayProp'
 import {
   flexItemStyle,
   FlexItemStyleProps,

src/core/primitives/grid/grid.tsx

@@ -1,6 +1,6 @@
 import {forwardRef} from 'react'
 import {styled} from 'styled-components'
-import {useArrayProp} from '../../hooks'
+import {useArrayProp} from '../../hooks/useArrayProp'
 import {responsiveGridStyle, ResponsiveGridStyleProps} from '../../styles/internal'
 import {Box, BoxProps} from '../box'
 import {ResponsiveGridProps} from '../types'

src/core/primitives/heading/heading.tsx

@@ -1,7 +1,7 @@
 import {ThemeFontWeightKey} from '@sanity/ui/theme'
 import {forwardRef} from 'react'
 import {styled} from 'styled-components'
-import {useArrayProp} from '../../hooks'
+import {useArrayProp} from '../../hooks/useArrayProp'
 import {
   ResponsiveFontStyleProps,
   responsiveHeadingFont,

src/core/primitives/inline/inline.tsx

@@ -1,6 +1,6 @@
 import {forwardRef, useMemo, Children} from 'react'
 import {styled} from 'styled-components'
-import {useArrayProp} from '../../hooks'
+import {useArrayProp} from '../../hooks/useArrayProp'
 import {Box, BoxProps} from '../box'
 import {inlineBaseStyle, inlineSpaceStyle} from './styles'
 import {ResponsiveInlineSpaceStyleProps} from './types'

src/core/primitives/kbd/kbd.tsx

@@ -1,6 +1,6 @@
 import {forwardRef} from 'react'
 import {styled, css} from 'styled-components'
-import {useArrayProp} from '../../hooks'
+import {useArrayProp} from '../../hooks/useArrayProp'
 import {responsiveRadiusStyle, ResponsiveRadiusStyleProps} from '../../styles/internal'
 import {Radius} from '../../types'
 import {Box} from '../box'

src/core/primitives/label/label.tsx

@@ -1,7 +1,7 @@
 import {ThemeFontWeightKey} from '@sanity/ui/theme'
 import {forwardRef} from 'react'
 import {styled} from 'styled-components'
-import {useArrayProp} from '../../hooks'
+import {useArrayProp} from '../../hooks/useArrayProp'
 import {responsiveLabelFont, responsiveTextAlignStyle} from '../../styles/internal'
 import {TextAlign} from '../../types'
 import {labelBaseStyle} from './styles'

src/core/primitives/popover/popover.tsx

@@ -24,7 +24,8 @@ import {
   useMemo,
   useRef,
 } from 'react'
-import {useArrayProp, useElementSize, useMediaIndex, usePrefersReducedMotion} from '../../hooks'
+import {useElementSize, useMediaIndex, usePrefersReducedMotion} from '../../hooks'
+import {useArrayProp} from '../../hooks/useArrayProp'
 import {origin} from '../../middleware/origin'
 import {useTheme_v2} from '../../theme'
 import {BoxOverflow, CardTone, Placement, PopoverMargins} from '../../types'

src/core/primitives/select/select.tsx

@@ -1,7 +1,8 @@
 import {ChevronDownIcon} from '@sanity/icons'
 import {forwardRef, useImperativeHandle, useRef} from 'react'
 import {styled} from 'styled-components'
-import {useCustomValidity, useArrayProp} from '../../hooks'
+import {useCustomValidity} from '../../hooks'
+import {useArrayProp} from '../../hooks/useArrayProp'
 import {Radius} from '../../types'
 import {Box} from '../box'
 import {Text} from '../text'

src/core/primitives/stack/stack.tsx

@@ -1,6 +1,6 @@
 import {forwardRef} from 'react'
 import {styled} from 'styled-components'
-import {useArrayProp} from '../../hooks'
+import {useArrayProp} from '../../hooks/useArrayProp'
 import {Box, BoxProps} from '../box'
 import {stackBaseStyle, responsiveStackSpaceStyle, ResponsiveStackSpaceStyleProps} from './styles'
 

src/core/primitives/text/text.tsx

@@ -1,7 +1,7 @@
 import {ThemeFontWeightKey} from '@sanity/ui/theme'
 import {forwardRef} from 'react'
 import {styled} from 'styled-components'
-import {useArrayProp} from '../../hooks'
+import {useArrayProp} from '../../hooks/useArrayProp'
 import {
   ResponsiveFontStyleProps,
   responsiveTextAlignStyle,

src/core/primitives/textArea/textArea.tsx

@@ -1,7 +1,8 @@
 import {ThemeFontWeightKey} from '@sanity/ui/theme'
 import {forwardRef, useImperativeHandle, useRef} from 'react'
 import {styled} from 'styled-components'
-import {useCustomValidity, useArrayProp} from '../../hooks'
+import {useCustomValidity} from '../../hooks'
+import {useArrayProp} from '../../hooks/useArrayProp'
 import {
   responsiveInputPaddingStyle,
   responsiveRadiusStyle,

src/core/primitives/textInput/textInput.tsx

@@ -4,7 +4,8 @@ import {forwardRef, isValidElement, useCallback, useImperativeHandle, useMemo, u
 import {isValidElementType} from 'react-is'
 import {styled} from 'styled-components'
 import {EMPTY_RECORD} from '../../constants'
-import {useArrayProp, useCustomValidity} from '../../hooks'
+import {useCustomValidity} from '../../hooks'
+import {useArrayProp} from '../../hooks/useArrayProp'
 import {
   responsiveRadiusStyle,
   ResponsiveRadiusStyleProps,

src/core/primitives/tooltip/tooltip.tsx

@@ -25,7 +25,8 @@ import {
 } from 'react'
 import {styled} from 'styled-components'
 import {useEffectEvent} from 'use-effect-event'
-import {useArrayProp, usePrefersReducedMotion} from '../../hooks'
+import {usePrefersReducedMotion} from '../../hooks'
+import {useArrayProp} from '../../hooks/useArrayProp'
 import {useDelayedState} from '../../hooks/useDelayedState'
 import {origin} from '../../middleware/origin'
 import {useTheme_v2} from '../../theme'

src/core/styles/helpers.ts

@@ -42,8 +42,8 @@ export function _responsive<T>(
 /**
  * @internal
  */
-export function _getArrayProp<T = number>(val: T | T[] | undefined, defaultVal?: T[]): T[] {
-  if (val === undefined) return defaultVal || EMPTY_ARRAY
+export function _getArrayProp<T = number>(val: T | T[] | undefined): T[] {
+  if (val === undefined) return EMPTY_ARRAY
 
   return Array.isArray(val) ? val : [val]
 }