perf(useSlots): short-circuit and skip filled slots

Author: hectahertz

packages/react/src/hooks/useSlots.ts

@@ -39,13 +39,15 @@ export function useSlots<Config extends SlotConfig>(
   config: Config,
 ): [Partial<SlotElements<Config>>, React.ReactNode[]] {
   // Object mapping slot names to their elements
-  const slots: Partial<SlotElements<Config>> = mapValues(config, () => undefined)
+  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
 
   // eslint-disable-next-line github/array-foreach
   React.Children.forEach(children, child => {
@@ -54,44 +56,50 @@ export function useSlots<Config extends SlotConfig>(
       return
     }
 
-    const index = values.findIndex(value => {
+    // 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
-        return (child.type === component || isSlot(child, component as SlotMarker)) && testFn(child.props)
+        if ((child.type === component || isSlot(child, component as SlotMarker)) && testFn(child.props)) {
+          matchedIndex = i
+          break
+        }
       } else {
-        return child.type === value || isSlot(child, value as SlotMarker)
+        if (child.type === value || isSlot(child, value as SlotMarker)) {
+          matchedIndex = i
+          break
+        }
       }
-    })
+    }
 
     // If the child is not a slot, add it to the `rest` array
-    if (index === -1) {
+    if (matchedIndex === -1) {
       rest.push(child)
       return
     }
 
-    const slotKey = keys[index]
+    const slotKey = keys[matchedIndex]
 
     // If slot is already filled, ignore duplicates
-    if (slots[slotKey]) {
+    if (slots[slotKey] !== undefined) {
       warning(true, `Found duplicate "${String(slotKey)}" slot. Only the first will be rendered.`)
       return
     }
 
     // If the child is a slot, add it to the `slots` object
-
     slots[slotKey] = child as SlotValue<Config, keyof Config>
+    slotsFound++
   })
 
   return [slots, rest]
 }
-
-/** Map the values of an object */
-function mapValues<T extends Record<string, unknown>, V>(obj: T, fn: (value: T[keyof T]) => V) {
-  return Object.keys(obj).reduce(
-    (result, key: keyof T) => {
-      result[key] = fn(obj[key])
-      return result
-    },
-    {} as Record<keyof T, V>,
-  )
-}