Address nits

Author: lawrencewin

packages/experimental/TabList/src/Tab/useTab.win32.ts

@@ -92,13 +92,14 @@ export const useTab = (props: TabProps): TabInfo => {
 
   React.useEffect(() => {
     updateTabRef(tabKey, componentRef);
+    // Intentionally disable exhaustive-deps warning this and the following hooks because the hook shouldn't run whenever the excluded dependencies change.
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [componentRef]);
+  }, [tabKey, componentRef]);
 
   React.useEffect(() => {
     updateDisabledTabs(tabKey, disabled);
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [disabled]);
+  }, [tabKey, disabled]);
 
   /**
    * Continuing from `handlePressAndDeferFocus`, once we have updated the selection state, we can safely set focus to the correct tab so

packages/experimental/TabList/src/TabList/TabList.tsx

@@ -36,15 +36,15 @@ export const TabList = compose<TabListType>({
 
       const { disabled, defaultTabbableElement, isCircularNavigation, vertical, ...mergedProps } = mergeProps(tablist.props, final);
 
-      const { animatedIndicatorStyles, canShowAnimatedIndicator, disabled: disabledState, layout, selectedKey } = tablist.state;
+      const { animatedIndicatorStyles, canShowAnimatedIndicator, disabled: tablistDisabledState, layout, selectedKey } = tablist.state;
 
       return (
         <TabListContext.Provider
           // Passes in the selected key and a hook function to update the newly selected tab and call the client's onTabsClick callback.
           value={tablist.state}
         >
           <Slots.container
-            disabled={disabled || disabledState}
+            disabled={disabled || tablistDisabledState}
             defaultTabbableElement={defaultTabbableElement}
             focusZoneDirection={vertical ? 'vertical' : 'horizontal'}
             isCircularNavigation={isCircularNavigation}

packages/experimental/TabList/src/TabList/TabList.types.ts

@@ -87,7 +87,7 @@ export interface TabListState {
   setInvoked?: (invoked: boolean) => void;
 
   /**
-   * Setter for the selected Tab's ref to set as the default tabbable element in the FocusZone
+   * Setter for the focused Tab's ref to set as the default tabbable element in the FocusZone
    */
   setFocusedTabRef: (ref: React.RefObject<any>) => void;
 

packages/experimental/TabList/src/TabList/useTabList.ts

@@ -44,11 +44,11 @@ export const useTabList = (props: TabListProps): TabListInfo => {
   const [tabKeys, setTabKeys] = React.useState<string[]>([]);
   const [allTabsDisabled, setAllTabsDisabled] = React.useState(false);
 
-  // These
+  // These maps are used to switch tab focus in the event the selected tab is disabled. React refs are used as storage because updating the maps shouldn't trigger a re-render.
   const tabRefMap = React.useRef<{ [key: string]: React.RefObject<View> }>({}).current;
   const disabledStateMap = React.useRef<{ [key: string]: boolean }>({}).current;
 
-  const updateTabRef = (key: string, ref: React.RefObject<View>) => (tabRefMap[key] = ref);
+  const updateTabRef = React.useCallback((key: string, ref: React.RefObject<View>) => (tabRefMap[key] = ref), [tabRefMap]);
   const updateDisabledTabs = React.useCallback(
     (key: string, isDisabled: boolean) => {
       disabledStateMap[key] = isDisabled;