From d1dd8718afa890349741c24a435aab9cb7648122 Mon Sep 17 00:00:00 2001
From: Enguerran Weiss <enguerranweiss@gmail.com>
Date: Fri, 12 Sep 2025 11:04:35 +0200
Subject: [PATCH 1/2] fixed initial selectedTabIndex on Tabs

---
 src/Tabs.tsx | 14 ++++++++------
 1 file changed, 8 insertions(+), 6 deletions(-)

diff --git a/src/Tabs.tsx b/src/Tabs.tsx
index d092d472..1a469c62 100644
--- a/src/Tabs.tsx
+++ b/src/Tabs.tsx
@@ -7,7 +7,8 @@ import React, {
     useState,
     useEffect,
     type ReactNode,
-    type CSSProperties
+    type CSSProperties,
+    useCallback
 } from "react";
 import type { FrIconClassName, RiIconClassName } from "./fr/generatedFromCss/classNames";
 import { symToStr } from "tsafe/symToStr";
@@ -85,16 +86,17 @@ export const Tabs = memo(
             return index === -1 ? 0 : index;
         };
 
+        const currentSelectedTabIndex = getSelectedTabIndex();
+
         const buttonRefs = React.useRef<Array<HTMLButtonElement | null>>([]);
 
-        const [selectedTabIndex, setSelectedTabIndex] = useState<number>(getSelectedTabIndex);
+        const [selectedTabIndex, setSelectedTabIndex] = useState<number>(currentSelectedTabIndex);
 
         useEffect(() => {
-            if (selectedTabId === undefined) {
-                return;
+            if (selectedTabId) {
+                setSelectedTabIndex(currentSelectedTabIndex);
             }
-            setSelectedTabIndex(getSelectedTabIndex());
-        }, [selectedTabId]);
+        }, [selectedTabId, currentSelectedTabIndex]);
 
         const onTabClickFactory = useCallbackFactory(([tabIndex]: [number]) => {
             if (selectedTabId === undefined) {

From ae2e642ef78a9175470a2e907d03bcb4ccb42bf3 Mon Sep 17 00:00:00 2001
From: Enguerran Weiss <enguerranweiss@gmail.com>
Date: Fri, 12 Sep 2025 11:04:46 +0200
Subject: [PATCH 2/2] fixed initial selectedTabIndex on Tabs

---
 src/Tabs.tsx | 25 +++----------------------
 1 file changed, 3 insertions(+), 22 deletions(-)

diff --git a/src/Tabs.tsx b/src/Tabs.tsx
index 1a469c62..bc2ff363 100644
--- a/src/Tabs.tsx
+++ b/src/Tabs.tsx
@@ -1,15 +1,6 @@
 "use client";
 
-import React, {
-    memo,
-    forwardRef,
-    useId,
-    useState,
-    useEffect,
-    type ReactNode,
-    type CSSProperties,
-    useCallback
-} from "react";
+import React, { memo, forwardRef, useId, type ReactNode, type CSSProperties, useMemo } from "react";
 import type { FrIconClassName, RiIconClassName } from "./fr/generatedFromCss/classNames";
 import { symToStr } from "tsafe/symToStr";
 import { fr } from "./fr";
@@ -79,25 +70,15 @@ export const Tabs = memo(
             "explicitlyProvidedId": id_props
         });
 
-        const getSelectedTabIndex = () => {
+        const selectedTabIndex = useMemo(() => {
             const index = tabs.findIndex(tab =>
                 "content" in tab ? tab.isDefault ?? false : tab.tabId === selectedTabId
             );
             return index === -1 ? 0 : index;
-        };
-
-        const currentSelectedTabIndex = getSelectedTabIndex();
+        }, [tabs, selectedTabId]);
 
         const buttonRefs = React.useRef<Array<HTMLButtonElement | null>>([]);
 
-        const [selectedTabIndex, setSelectedTabIndex] = useState<number>(currentSelectedTabIndex);
-
-        useEffect(() => {
-            if (selectedTabId) {
-                setSelectedTabIndex(currentSelectedTabIndex);
-            }
-        }, [selectedTabId, currentSelectedTabIndex]);
-
         const onTabClickFactory = useCallbackFactory(([tabIndex]: [number]) => {
             if (selectedTabId === undefined) {
                 onTabChange?.({