Merge pull request #26899 from storybookjs/chore/fix-rendering-of-sta…

…teful-tabs-component

UI: Fix not re-rendering tabs on state change

code/ui/components/src/components/tabs/tabs.stories.tsx

@@ -18,6 +18,11 @@ interface FibonacciMap {
   [key: string]: number;
 }
 
+function Counter() {
+  const [count, setCount] = React.useState(0);
+  return <button onClick={() => setCount((prev) => prev + 1)}>{count}</button>;
+}
+
 function fibonacci(num: number, memo?: FibonacciMap): number {
   if (!memo) {
     memo = {};
@@ -376,3 +381,22 @@ export const StatelessWithCustomEmpty = {
     />
   ),
 } satisfies StoryObj<typeof Tabs>;
+
+export const StatefulWithStatefulPanel = {
+  render: (args) => {
+    const [update, setUpdate] = React.useState(0);
+    return (
+      <div>
+        <button onClick={() => setUpdate((prev) => prev + 1)}>Update</button>
+        <TabsState initial="test-1" {...args}>
+          <div id="test-1" title="Test 1">
+            <Counter key={update} />
+          </div>
+          <div id="test-2" title="Test 2">
+            <Counter key={update} />
+          </div>
+        </TabsState>
+      </div>
+    );
+  },
+} satisfies Story;

code/ui/components/src/components/tabs/tabs.tsx

@@ -145,18 +145,13 @@ export const Tabs: FC<TabsProps> = memo(
     emptyState,
     showToolsWhenEmpty,
   }) => {
-    const idList = childrenToList(children)
-      .map((i) => i.id)
-      .join(',');
-
     const list = useMemo(
       () =>
         childrenToList(children).map((i, index) => ({
           ...i,
           active: selected ? i.id === selected : index === 0,
         })),
-      // eslint-disable-next-line react-hooks/exhaustive-deps -- we're using idList as a replacement for children
-      [selected, idList]
+      [children, selected]
     );
 
     const { visibleList, tabBarRef, tabRefs, AddonTab } = useList(list);