fix: add locale dependency to component rendering effects

hamster1963 · Feb 13, 2025 · a6aa91d · a6aa91d
1 parent e55a60c
commit a6aa91d
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 5 deletions.
diff --git a/components/Switch.tsx b/components/Switch.tsx
@@ -2,7 +2,7 @@
 
 import getEnv from "@/lib/env-entry"
 import { cn } from "@/lib/utils"
-import { useTranslations } from "next-intl"
+import { useLocale, useTranslations } from "next-intl"
 import { createRef, useEffect, useRef, useState } from "react"
 
 export default function Switch({
@@ -19,6 +19,7 @@ export default function Switch({
   const scrollRef = useRef<HTMLDivElement>(null)
   const tagRefs = useRef(allTag.map(() => createRef<HTMLDivElement>()))
   const t = useTranslations("ServerListClient")
+  const locale = useLocale()
   const [indicator, setIndicator] = useState<{ x: number; w: number }>({
     x: 0,
     w: 0,
@@ -58,7 +59,7 @@ export default function Switch({
         w: currentTagElement.offsetWidth,
       })
     }
-  }, [nowTag])
+  }, [nowTag, locale])
 
   useEffect(() => {
     const currentTagElement = tagRefs.current[allTag.indexOf(nowTag)]?.current
@@ -75,7 +76,7 @@ export default function Switch({
         behavior: "smooth",
       })
     }
-  }, [nowTag])
+  }, [nowTag, locale])
 
   return (
     <div

diff --git a/components/TabSwitch.tsx b/components/TabSwitch.tsx
@@ -1,7 +1,7 @@
 "use client"
 
 import { cn } from "@/lib/utils"
-import { useTranslations } from "next-intl"
+import { useLocale, useTranslations } from "next-intl"
 import { useEffect, useRef, useState } from "react"
 
 export default function TabSwitch({
@@ -19,6 +19,7 @@ export default function TabSwitch({
     w: 0,
   })
   const tabRefs = useRef<(HTMLDivElement | null)[]>([])
+  const locale = useLocale()
 
   useEffect(() => {
     const currentTabElement = tabRefs.current[tabs.indexOf(currentTab)]
@@ -32,7 +33,7 @@ export default function TabSwitch({
         w: currentTabElement.offsetWidth,
       })
     }
-  }, [currentTab, tabs])
+  }, [currentTab, tabs, locale])
 
   return (
     <div className="z-50 flex flex-col items-start rounded-[50px]">