diff --git a/packages/components/src/components/tabs/tabs.tsx b/packages/components/src/components/tabs/tabs.tsx
index 591bd7e3..1b273a9e 100644
--- a/packages/components/src/components/tabs/tabs.tsx
+++ b/packages/components/src/components/tabs/tabs.tsx
@@ -8,6 +8,7 @@ import {
   useCallback,
   useEffect,
   useId,
+  useMemo,
   useRef,
   useState,
 } from "react";
@@ -69,18 +70,26 @@ const TabsRoot = ({
   const tabRefs = useRef<(HTMLLIElement | null)[]>([]);
   const uniqueId = useId();
 
-  const arrayChildren = Children.toArray(children).filter(
-    (child): child is ReactElement<TabsItemProps> => isValidElement(child)
+  const arrayChildren = useMemo(
+    () =>
+      Children.toArray(children).filter(
+        (child): child is ReactElement<TabsItemProps> => isValidElement(child)
+      ),
+    [children]
   );
 
-  const tabIds = arrayChildren.map((child, index) => {
-    if (child.props.id) {
-      return child.props.id;
-    }
+  const tabIds = useMemo(
+    () =>
+      arrayChildren.map((child, index) => {
+        if (child.props.id) {
+          return child.props.id;
+        }
 
-    const tabId = child.props.title ?? DEFAULT_TAB_TITLE;
-    return `${uniqueId}-${slugify(tabId)}-${index}`;
-  });
+        const tabId = child.props.title ?? DEFAULT_TAB_TITLE;
+        return `${uniqueId}-${slugify(tabId)}-${index}`;
+      }),
+    [arrayChildren, uniqueId]
+  );
 
   const validDefaultTabIndex =
     arrayChildren.length > 0