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

Author: hectahertz

packages/react/src/hooks/__tests__/useSlots.test.tsx

@@ -130,10 +130,7 @@ test('handles empty children', () => {
   expect(calls).toMatchInlineSnapshot(`
     [
       [
-        {
-          "a": undefined,
-          "b": undefined,
-        },
+        {},
         [],
       ],
     ]
@@ -165,7 +162,6 @@ test('ignores nested slots', () => {
       [
         {
           "a": <TestComponentA />,
-          "b": undefined,
         },
         [
           <div>

packages/react/src/hooks/useSlots.ts

@@ -47,7 +47,13 @@ export function useSlots<Config extends SlotConfig>(
   const keys = Object.keys(config) as Array<keyof Config>
   const values = Object.values(config)
   const totalSlots = keys.length
-  let slotsFound = 0
+
+  // 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 +62,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 +94,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]