[FluentUI v9] TabList component causes a spike in renders

[Diapolo10]

I'm migrating a project from FluentUI v8 to v9, and in the process I've switched a Pivot component to a TabList. The result looks and works fine in the actual UI, but this change broke our tests somehow. Previously the component only used a certain thunk once, but if any Tab or TabList components are in use, this suddenly spikes to a consistent 120 thunk calls.

I don't really know what could have caused this, as even a completely empty TabView triggers the problem. If I change it to an empty div, this issue vanishes. Nothing else in the code has changed.

For reference, here's the old component

const FilesTab: React.FC = () => {
  const dispatch = useAppDispatch();
  const fooGroups = useAppSelector(selectFooGroups);
  const fooFiles = useAppSelector(selectFoos);
  const barGroups = useAppSelector(selectBarGroups);
  const barFiles = useAppSelector(selectBars);

  const numberOfFoos = fooFiles.length;
  const numberOfBars = barFiles.length;

  const fooWarnings = useFileStatusToast(FileTypename.FOO);
  const barWarnings = useFileStatusToast(FileTypename.BAR);

  const activeView = useAppSelector(selectActiveTabInFilesView);

  const _onLinkClick = (item: any) => {
    dispatch(tabStore.setActiveTabInFilesView(item.props.itemKey as FileTypename));
  };

  return (
    <Pivot onLinkClick={_onLinkClick} selectedKey={activeView}>
      <PivotItem
        headerText={FilesViewTabNames.FOO}
        itemKey={FileTypename.FOO}
        itemCount={numberOfFoos}
      >
        <FooList groups={fooGroups} foos={fooFiles} warnings={fooWarnings} />
      </PivotItem>
      <PivotItem
        headerText={FilesViewTabNames.BAR}
        itemKey={FileTypename.BAR}
        itemCount={numberOfBars}
      >
        <BarList groups={barGroups} bars={barFiles} warnings={barWarnings} />
      </PivotItem>
      <PivotItem
        headerText={FilesViewTabNames.BAZ}
        itemKey={FileTypename.BAZ}
      >
        <BazList />
      </PivotItem>
    </Pivot>
  );
};

and here's the current version:

const FilesTab: React.FC = () => {
  const dispatch = useAppDispatch();
  const fooGroups = useAppSelector(selectFooGroups);
  const fooFiles = useAppSelector(selectFoos);
  const barGroups = useAppSelector(selectBarGroups);
  const barFiles = useAppSelector(selectBars);

  const numberOfFoos = fooFiles.length;
  const numberOfBars = barFiles.length;

  const fooWarnings = useFileStatusToast(FileTypename.FOO);
  const barWarnings = useFileStatusToast(FileTypename.BAR);

  const activeView = useAppSelector(selectActiveTabInFilesView);

  const onTabSelect = (event: SelectTabEvent, data: SelectTabData) => {
    if (data.value !== activeView) {
      dispatch(tabStore.setActiveTabInFilesView(data.value as FileTypename));
    }
  };

  return (
    <>
      <TabList
        appearance="subtle"
        selectedValue={activeView}
        onTabSelect={onTabSelect}
      >
        <Tab value={FileTypename.FOO} icon={<FooMultipleRegular />}>
          {`${FilesViewTabNames.FOO} (${numberOfFoos})`}
        </Tab>
        <Tab value={FileTypename.BAR} icon={<BarRegular />}>
          {`${FilesViewTabNames.BAR} (${numberOfBars})`}
        </Tab>
        <Tab value={FileTypename.BAZ} icon={<SettingsRegular />}>
          {FilesViewTabNames.BAZ}
        </Tab>
      </TabList>
      <div>
        {activeView === FileTypename.FOO && (
          <FooList groups={fooGroups} foos={fooFiles} warnings={fooWarnings} />
        )}
        {activeView === FileTypename.BAR && (
          <BarList groups={barGroups} bars={barFiles} warnings={barWarnings} />
        )}
        {activeView === FileTypename.BAZ && <BazList />}
      </div>
    </>
  );
};

Do you have any suggestions for what might have gone wrong, and how best to fix it?

[ValentinaKozlova]

Hey @Diapolo10,
could you please provide reproducible environment (e.g. Stackblitz link)?
cc: @dmytrokirpa

[Diapolo10]

This is a small part of a company project. I can try to create an SSCCE, but it might take a while due to the complexity of the project, other work priorities, and the fact I won't be touching it on weekends.

[ValentinaKozlova]

Here's the link for V9 TabList, you just need to put there your code and make it work: https://stackblitz.com/run?file=src%2Fexample.tax
Similar link you might want to find for V8 components. Because without reproducible environment it'll be hard to help you.