From 4a1eddf27492571a17d4934f34b613b33ee2fff4 Mon Sep 17 00:00:00 2001
From: Kevin Coughlin <keco@microsoft.com>
Date: Fri, 13 Nov 2020 10:53:34 -0800
Subject: [PATCH] [Perf] Avoid React.Children.count traversal for empty state
 early return (#15503)

---
 ...2020-10-13-16-47-27-keco-react-children-for-empty.json | 8 ++++++++
 ...2020-10-13-16-47-27-keco-react-children-for-empty.json | 8 ++++++++
 .../src/components/Card/CardSection/CardSection.view.tsx  | 4 ++--
 .../src/components/Stack/StackItem/StackItem.tsx          | 3 ++-
 packages/react-internal/src/components/Text/Text.view.tsx | 4 ++--
 5 files changed, 22 insertions(+), 5 deletions(-)
 create mode 100644 change/@fluentui-react-internal-2020-10-13-16-47-27-keco-react-children-for-empty.json
 create mode 100644 change/@uifabric-react-cards-2020-10-13-16-47-27-keco-react-children-for-empty.json

diff --git a/change/@fluentui-react-internal-2020-10-13-16-47-27-keco-react-children-for-empty.json b/change/@fluentui-react-internal-2020-10-13-16-47-27-keco-react-children-for-empty.json
new file mode 100644
index 0000000000000..a06973c7263e5
--- /dev/null
+++ b/change/@fluentui-react-internal-2020-10-13-16-47-27-keco-react-children-for-empty.json
@@ -0,0 +1,8 @@
+{
+  "type": "prerelease",
+  "comment": "Avoid React.Children traversal for early return cases",
+  "packageName": "@fluentui/react-internal",
+  "email": "KevinTCoughlin@users.noreply.github.com",
+  "dependentChangeType": "patch",
+  "date": "2020-10-13T23:47:26.980Z"
+}
diff --git a/change/@uifabric-react-cards-2020-10-13-16-47-27-keco-react-children-for-empty.json b/change/@uifabric-react-cards-2020-10-13-16-47-27-keco-react-children-for-empty.json
new file mode 100644
index 0000000000000..13d3c91e48574
--- /dev/null
+++ b/change/@uifabric-react-cards-2020-10-13-16-47-27-keco-react-children-for-empty.json
@@ -0,0 +1,8 @@
+{
+  "type": "prerelease",
+  "comment": "Avoid React.Children traversal for early return cases",
+  "packageName": "@fluentui/react-cards",
+  "email": "KevinTCoughlin@users.noreply.github.com",
+  "dependentChangeType": "patch",
+  "date": "2020-10-13T23:47:14.293Z"
+}
diff --git a/packages/react-cards/src/components/Card/CardSection/CardSection.view.tsx b/packages/react-cards/src/components/Card/CardSection/CardSection.view.tsx
index 6446f7eac3f63..4cc349005ce83 100644
--- a/packages/react-cards/src/components/Card/CardSection/CardSection.view.tsx
+++ b/packages/react-cards/src/components/Card/CardSection/CardSection.view.tsx
@@ -1,12 +1,12 @@
 /** @jsx withSlots */
-import * as React from 'react';
 import { withSlots, getSlots } from '@fluentui/foundation-legacy';
 import { Stack } from '@fluentui/react/lib/Stack';
 import { ICardSectionComponent, ICardSectionProps, ICardSectionSlots } from './CardSection.types';
 
 export const CardSectionView: ICardSectionComponent['view'] = props => {
   const { children, ...rest } = props;
-  if (React.Children.count(children) < 1) {
+  // eslint-disable-next-line eqeqeq
+  if (children == null) {
     return null;
   }
 
diff --git a/packages/react-internal/src/components/Stack/StackItem/StackItem.tsx b/packages/react-internal/src/components/Stack/StackItem/StackItem.tsx
index 28691e27d5834..f5e0ec48f9743 100644
--- a/packages/react-internal/src/components/Stack/StackItem/StackItem.tsx
+++ b/packages/react-internal/src/components/Stack/StackItem/StackItem.tsx
@@ -6,7 +6,8 @@ import { StackItemStyles as styles } from './StackItem.styles';
 
 const StackItemView: IStackItemComponent['view'] = props => {
   const { children } = props;
-  if (React.Children.count(children) < 1) {
+  // eslint-disable-next-line eqeqeq
+  if (children == null) {
     return null;
   }
 
diff --git a/packages/react-internal/src/components/Text/Text.view.tsx b/packages/react-internal/src/components/Text/Text.view.tsx
index 273baef42feee..b941f4eeb8c5b 100644
--- a/packages/react-internal/src/components/Text/Text.view.tsx
+++ b/packages/react-internal/src/components/Text/Text.view.tsx
@@ -1,11 +1,11 @@
 /** @jsx withSlots */
-import * as React from 'react';
 import { withSlots, getSlots } from '@fluentui/foundation-legacy';
 import { getNativeProps, htmlElementProperties } from '../../Utilities';
 import { ITextComponent, ITextProps, ITextSlots } from './Text.types';
 
 export const TextView: ITextComponent['view'] = props => {
-  if (React.Children.count(props.children) === 0) {
+  // eslint-disable-next-line eqeqeq
+  if (props.children == null) {
     return null;
   }