perf(useSlots): pre-compute array matcher type, update snapshots

Author: hectahertz

packages/react/src/hooks/useSlots.ts

@@ -38,16 +38,25 @@ export function useSlots<Config extends SlotConfig>(
   children: React.ReactNode,
   config: Config,
 ): [Partial<SlotElements<Config>>, React.ReactNode[]] {
-  // Object mapping slot names to their elements
-  const slots: Partial<SlotElements<Config>> = {} as Partial<SlotElements<Config>>
-
   // Array of elements that are not slots
   const rest: React.ReactNode[] = []
 
   const keys = Object.keys(config) as Array<keyof Config>
   const values = Object.values(config)
   const totalSlots = keys.length
-  let slotsFound = 0
+
+  // Object mapping slot names to their elements, initialized with undefined for each key
+  const slots: Partial<SlotElements<Config>> = {} as Partial<SlotElements<Config>>
+  for (let i = 0; i < totalSlots; i++) {
+    slots[keys[i]] = undefined
+  }
+
+  // Pre-compute which slots use the [Component, testFn] matcher pattern
+  // to avoid Array.isArray() checks in the hot inner loop
+  const isArrayMatcher: boolean[] = new Array(totalSlots)
+  for (let i = 0; i < totalSlots; i++) {
+    isArrayMatcher[i] = Array.isArray(values[i])
+  }
 
   // eslint-disable-next-line github/array-foreach
   React.Children.forEach(children, child => {
@@ -56,26 +65,16 @@ export function useSlots<Config extends SlotConfig>(
       return
     }
 
-    // Short-circuit: if all slots are filled, remaining children go to rest
-    if (slotsFound === totalSlots) {
-      rest.push(child)
-      return
-    }
-
     let matchedIndex = -1
     for (let i = 0; i < totalSlots; i++) {
-      // Skip already-filled slots
-      if (slots[keys[i]] !== undefined) continue
-
-      const value = values[i]
-      if (Array.isArray(value)) {
-        const [component, testFn] = value
+      if (isArrayMatcher[i]) {
+        const [component, testFn] = values[i] as ComponentAndPropsMatcher
         if ((child.type === component || isSlot(child, component as SlotMarker)) && testFn(child.props)) {
           matchedIndex = i
           break
         }
       } else {
-        if (child.type === value || isSlot(child, value as SlotMarker)) {
+        if (child.type === values[i] || isSlot(child, values[i] as SlotMarker)) {
           matchedIndex = i
           break
         }
@@ -98,7 +97,6 @@ export function useSlots<Config extends SlotConfig>(
 
     // If the child is a slot, add it to the `slots` object
     slots[slotKey] = child as SlotValue<Config, keyof Config>
-    slotsFound++
   })
 
   return [slots, rest]