changeset

Author: hectahertz

.changeset/perf-autocomplete-memo-deps.md

@@ -0,0 +1,5 @@
+---
+'@primer/react': patch
+---
+
+perf(Autocomplete): eliminate re-renders on arrow-key navigation by applying highlight via DOM

packages/react/src/Autocomplete/AutocompleteMenu.tsx

@@ -47,6 +47,57 @@ function getdefaultCheckedSelectionChange<T extends AutocompleteMenuItem>(
 
 const isItemSelected = (itemId: string, selectedItemIds: Array<string>) => selectedItemIds.includes(itemId)
 
+/**
+ * Memoized wrapper around ActionList.Item that skips re-rendering when props
+ * haven't changed. Arrow-key navigation no longer triggers re-renders at all
+ * because the active highlight is applied directly to the DOM via the
+ * `data-active` attribute in the `onActiveDescendantChanged` callback.
+ *
+ * This works because `selectableItems` useMemo no longer depends on
+ * `highlightedItem`, so the item object references stay stable across
+ * highlight changes.
+ */
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const MemoizedAutocompleteItem = React.memo(function MemoizedAutocompleteItem<T extends Record<string, any>>({
+  item,
+}: {
+  item: T
+}) {
+  const {
+    id,
+    onAction,
+    children,
+    text,
+    leadingVisual: LeadingVisual,
+    trailingVisual: TrailingVisual,
+    key,
+    role,
+    ...itemProps
+  } = item
+  return (
+    <ActionList.Item
+      key={(key ?? id) as string | number}
+      onSelect={() => onAction(item)}
+      {...itemProps}
+      id={id}
+      data-id={id}
+      role={role as AriaRole}
+    >
+      {LeadingVisual && (
+        <ActionList.LeadingVisual>
+          {isElement(LeadingVisual) ? LeadingVisual : <LeadingVisual />}
+        </ActionList.LeadingVisual>
+      )}
+      {(children ?? text) as React.ReactNode}
+      {TrailingVisual && (
+        <ActionList.TrailingVisual>
+          {isElement(TrailingVisual) ? TrailingVisual : <TrailingVisual />}
+        </ActionList.TrailingVisual>
+      )}
+    </ActionList.Item>
+  )
+})
+
 function getItemById<T extends AutocompleteMenuItem>(itemId: string, items: T[]) {
   return items.find(item => item.id === itemId)
 }
@@ -167,10 +218,12 @@ function AutocompleteMenu<T extends AutocompleteItemProps>(props: AutocompleteMe
   } = props
   const listContainerRef = useRef<HTMLDivElement>(null)
   const allItemsToRenderRef = useRef<T[]>([])
-  const [highlightedItem, setHighlightedItem] = useState<T>()
+  // Using a ref instead of state to avoid triggering a re-render of all items
+  // on every arrow-key press. The active styling is applied directly to the DOM
+  // via the `data-active` attribute (which ActionList.Item already styles).
+  const highlightedItemRef = useRef<T>()
   const [sortedItemIds, setSortedItemIds] = useState<Array<string>>(items.map(({id: itemId}) => itemId))
   const generatedUniqueId = useId(id)
-  const highlightedItemId = highlightedItem?.id
 
   const selectableItems = useMemo(
     () =>
@@ -289,15 +342,32 @@ function AutocompleteMenu<T extends AutocompleteItemProps>(props: AutocompleteMe
         return !(element instanceof HTMLInputElement)
       },
       activeDescendantFocus: inputRef,
-      onActiveDescendantChanged: (current, _previous, directlyActivated) => {
+      onActiveDescendantChanged: (current, previous, directlyActivated) => {
         activeDescendantRef.current = current || null
+
+        // Toggle the active styling directly on the DOM elements to avoid
+        // re-rendering every item in the list. ActionList.Item already styles
+        // `[data-active]` so we just set/remove the attribute.
+        const previousLi = previous?.closest('li')
+        const currentLi = current?.closest('li')
+        if (previousLi) previousLi.removeAttribute('data-active')
+        if (currentLi) currentLi.setAttribute('data-active', 'true')
+
         if (current) {
           const selectedItem = allItemsToRenderRef.current.find(item => {
-            return item.id === current.closest('li')?.getAttribute('data-id')
+            return item.id === currentLi?.getAttribute('data-id')
           })
 
-          setHighlightedItem(selectedItem)
+          highlightedItemRef.current = selectedItem
           setIsMenuDirectlyActivated(directlyActivated)
+
+          // Update autocomplete suggestion inline (moved from the useEffect
+          // that previously depended on highlightedItem state)
+          if (selectedItem?.text?.startsWith(deferredInputValue) && !selectedItemIds.includes(selectedItem.id)) {
+            setAutocompleteSuggestion(selectedItem.text)
+          } else {
+            setAutocompleteSuggestion('')
+          }
         }
 
         if (current && customScrollContainerRef && customScrollContainerRef.current && directlyActivated) {
@@ -311,14 +381,15 @@ function AutocompleteMenu<T extends AutocompleteItemProps>(props: AutocompleteMe
   )
 
   useEffect(() => {
-    // Use deferredInputValue to avoid running this effect on every keystroke
-    // The Input component guards against stale suggestions
-    if (highlightedItem?.text?.startsWith(deferredInputValue) && !selectedItemIds.includes(highlightedItem.id)) {
-      setAutocompleteSuggestion(highlightedItem.text)
+    // When the input value changes, update the autocomplete suggestion based
+    // on the currently highlighted item (tracked via ref, not state).
+    const highlighted = highlightedItemRef.current
+    if (highlighted?.text?.startsWith(deferredInputValue) && !selectedItemIds.includes(highlighted.id)) {
+      setAutocompleteSuggestion(highlighted.text)
     } else {
       setAutocompleteSuggestion('')
     }
-  }, [highlightedItem, deferredInputValue, selectedItemIds, setAutocompleteSuggestion])
+  }, [deferredInputValue, selectedItemIds, setAutocompleteSuggestion])
 
   useEffect(() => {
     const itemIdSortResult = [...sortedItemIds].sort(
@@ -361,42 +432,9 @@ function AutocompleteMenu<T extends AutocompleteItemProps>(props: AutocompleteMe
               id={`${id}-listbox`}
               aria-labelledby={ariaLabelledBy}
             >
-              {allItemsToRender.map(item => {
-                const {
-                  id,
-                  onAction,
-                  children,
-                  text,
-                  leadingVisual: LeadingVisual,
-                  trailingVisual: TrailingVisual,
-                  key,
-                  role,
-                  ...itemProps
-                } = item
-                return (
-                  <ActionList.Item
-                    key={(key ?? id) as string | number}
-                    onSelect={() => onAction(item)}
-                    {...itemProps}
-                    active={highlightedItemId === id}
-                    id={id}
-                    data-id={id}
-                    role={role as AriaRole}
-                  >
-                    {LeadingVisual && (
-                      <ActionList.LeadingVisual>
-                        {isElement(LeadingVisual) ? LeadingVisual : <LeadingVisual />}
-                      </ActionList.LeadingVisual>
-                    )}
-                    {(children ?? text) as React.ReactNode}
-                    {TrailingVisual && (
-                      <ActionList.TrailingVisual>
-                        {isElement(TrailingVisual) ? TrailingVisual : <TrailingVisual />}
-                      </ActionList.TrailingVisual>
-                    )}
-                  </ActionList.Item>
-                )
-              })}
+              {allItemsToRender.map(item => (
+                <MemoizedAutocompleteItem key={(item.key ?? item.id) as string | number} item={item} />
+              ))}
             </ActionList>
           ) : emptyStateText !== false && emptyStateText !== null ? (
             <div className={classes.EmptyStateWrapper}>{emptyStateText}</div>