From d63fd49764d112172ea0493b01de229884a1c0c4 Mon Sep 17 00:00:00 2001
From: Caleb Zearing <czearing@outlook.com>
Date: Fri, 16 Oct 2020 15:27:55 -0700
Subject: [PATCH] PR feedback

---
 .../src/components/Pivot/Pivot.base.tsx       | 20 +++++++++++--------
 1 file changed, 12 insertions(+), 8 deletions(-)

diff --git a/packages/react-tabs/src/components/Pivot/Pivot.base.tsx b/packages/react-tabs/src/components/Pivot/Pivot.base.tsx
index 329e4c6332b32..d265a463ab91d 100644
--- a/packages/react-tabs/src/components/Pivot/Pivot.base.tsx
+++ b/packages/react-tabs/src/components/Pivot/Pivot.base.tsx
@@ -72,13 +72,6 @@ export const PivotBase: React.FunctionComponent<IPivotProps> = React.forwardRef<
     const [selectedKey, setSelectedKey] = useControllableValue(props.selectedKey, props.defaultSelectedKey);
 
     const { componentRef, theme, linkSize, linkFormat, overflowBehavior } = props;
-    // The overflow menu starts empty and items[] is updated as the overflow items change
-    const overflowMenuProps: IContextualMenuProps = {
-      items: [],
-      doNotLayer: true,
-      alignTargetEdge: true,
-      directionalHint: DirectionalHint.bottomRightEdge,
-    };
 
     let classNames: { [key in keyof IPivotStyles]: string };
     const divProps = getNativeProps<React.HTMLAttributes<HTMLDivElement>>(props, divProperties);
@@ -227,6 +220,17 @@ export const PivotBase: React.FunctionComponent<IPivotProps> = React.forwardRef<
       renderPivotLink(linkCollection, l, renderedSelectedKey, classNames.link),
     );
 
+    // The overflow menu starts empty and items[] is updated as the overflow items change
+    const overflowMenuProps: IContextualMenuProps = React.useMemo(
+      () => ({
+        items: [],
+        doNotLayer: true,
+        alignTargetEdge: true,
+        directionalHint: DirectionalHint.bottomRightEdge,
+      }),
+      [],
+    );
+
     const { menuButtonRef: overflowMenuButtonRef } = useOverflow({
       onOverflowItemsChanged: (overflowIndex, elements) => {
         // Set data-is-overflowing on each item
@@ -253,7 +257,7 @@ export const PivotBase: React.FunctionComponent<IPivotProps> = React.forwardRef<
           {items}
           {overflowBehavior === 'menu' && (
             <CommandButton
-              className={classNames.link + ' ' + classNames.overflowMenuButton}
+              className={css(classNames.link, classNames.overflowMenuButton)}
               elementRef={overflowMenuButtonRef}
               componentRef={overflowMenuButtonComponentRef}
               menuProps={overflowMenuProps}