diff --git a/src/components/NoteInteractions/Tabs.tsx b/src/components/NoteInteractions/Tabs.tsx
index eca9977d..a0430b80 100644
--- a/src/components/NoteInteractions/Tabs.tsx
+++ b/src/components/NoteInteractions/Tabs.tsx
@@ -16,11 +16,11 @@ export function Tabs({
   onTabChange: (tab: TTabValue) => void
 }) {
   const { t } = useTranslation()
-  const activeIndex = TABS.findIndex((tab) => tab.value === selectedTab)
   const tabRefs = useRef<(HTMLDivElement | null)[]>([])
   const [indicatorStyle, setIndicatorStyle] = useState({ width: 0, left: 0 })
 
   useEffect(() => {
+    const activeIndex = TABS.findIndex((tab) => tab.value === selectedTab)
     if (activeIndex >= 0 && tabRefs.current[activeIndex]) {
       const activeTab = tabRefs.current[activeIndex]
       const { offsetWidth, offsetLeft } = activeTab
@@ -30,7 +30,7 @@ export function Tabs({
         left: offsetLeft + padding / 2
       })
     }
-  }, [activeIndex])
+  }, [selectedTab])
 
   return (
     <div className="w-fit">
diff --git a/src/components/Tabs/index.tsx b/src/components/Tabs/index.tsx
index d9368519..c0a33d52 100644
--- a/src/components/Tabs/index.tsx
+++ b/src/components/Tabs/index.tsx
@@ -21,12 +21,12 @@ export default function Tabs({
 }) {
   const { t } = useTranslation()
   const { deepBrowsing, lastScrollTop } = useDeepBrowsing()
-  const activeIndex = tabs.findIndex((tab) => tab.value === value)
   const tabRefs = useRef<(HTMLDivElement | null)[]>([])
   const [indicatorStyle, setIndicatorStyle] = useState({ width: 0, left: 0 })
 
   useEffect(() => {
     const handleResize = () => {
+      const activeIndex = tabs.findIndex((tab) => tab.value === value)
       if (activeIndex >= 0 && tabRefs.current[activeIndex]) {
         const activeTab = tabRefs.current[activeIndex]
         const { offsetWidth, offsetLeft } = activeTab
@@ -42,7 +42,7 @@ export default function Tabs({
     return () => {
       window.removeEventListener('resize', handleResize)
     }
-  }, [activeIndex])
+  }, [value])
 
   return (
     <div