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

Author: hectahertz

packages/react/src/hooks/useSlots.ts

@@ -38,15 +38,26 @@ 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
+
+  // 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])
+  }
+
   let slotsFound = 0
 
   // eslint-disable-next-line github/array-foreach
@@ -56,26 +67,36 @@ export function useSlots<Config extends SlotConfig>(
       return
     }
 
-    // Short-circuit: if all slots are filled, remaining children go to rest
+    // Fast path: once all slots are filled, only check for duplicates
     if (slotsFound === totalSlots) {
+      for (let i = 0; i < totalSlots; i++) {
+        if (isArrayMatcher[i]) {
+          const [component, testFn] = values[i] as ComponentAndPropsMatcher
+          if ((child.type === component || isSlot(child, component as SlotMarker)) && testFn(child.props)) {
+            warning(true, `Found duplicate "${String(keys[i])}" slot. Only the first will be rendered.`)
+            return
+          }
+        } else {
+          if (child.type === values[i] || isSlot(child, values[i] as SlotMarker)) {
+            warning(true, `Found duplicate "${String(keys[i])}" slot. Only the first will be rendered.`)
+            return
+          }
+        }
+      }
       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
         }