[7.0] withSlots: refactor out redundant React.Children traversal (#15471

)

`7.0` cherry-pick of #15462.

change/@uifabric-foundation-2020-10-12-08-20-42-keco-react-children-stack.json

@@ -0,0 +1,8 @@
+{
+  "type": "patch",
+  "comment": "withSlots: avoid calling traverseAllChildren twice",
+  "packageName": "@uifabric/foundation",
+  "email": "KevinTCoughlin@users.noreply.github.com",
+  "dependentChangeType": "patch",
+  "date": "2020-10-12T15:20:41.946Z"
+}

packages/foundation/src/slots.tsx

@@ -40,13 +40,6 @@ export function withSlots<P>(
 ): ReturnType<React.FunctionComponent<P>> {
   const slotType = type as ISlot<P>;
   if (slotType.isSlot) {
-    // TODO: There is something weird going on here with children embedded in props vs. rest args.
-    // Comment out these lines to see. Make sure this function is doing the right things.
-    const numChildren = React.Children.count(children);
-    if (numChildren === 0) {
-      return slotType(props);
-    }
-
     // Since we are bypassing createElement, use React.Children.toArray to make sure children are
     // properly assigned keys.
     // TODO: should this be mutating? does React mutate children subprop with createElement?
@@ -56,6 +49,12 @@ export function withSlots<P>(
     //        Is there a better way to prevent slots from appearing in hierarchy? toArray doesn't address root issue.
     children = React.Children.toArray(children);
 
+    // TODO: There is something weird going on here with children embedded in props vs. rest args.
+    // Comment out these lines to see. Make sure this function is doing the right things.
+    if (children.length === 0) {
+      return slotType(props);
+    }
+
     return slotType({ ...(props as any), children });
   } else {
     // TODO: Are there some cases where children should NOT be spread? Also, spreading reraises perf question.