next intl language rerenders the whole page

Description

Whenever i change language my whole page rerenders and i loose my states is there any way to prevent it ?

here is my language change code

function changeLanguage(event) { setLang(event) const nextLocale = event; startTransition(() => { router.replace(pathname, { locale: nextLocale }); }); }

here is my full nextjs navbar code

"use client" import { Sheet, SheetTrigger, SheetContent, SheetClose } from "@/components/ui/sheet" import { Button } from "@/components/ui/button" import Link from "next/link" import { SelectComp } from "./SelectComp" import { useEffect, useState, useTransition } from "react" import Image from "next/image" import api from "@/lib/api" import { useAppDispatch, useAppSelector } from "@/lib/hooks" import { setUser } from "@/lib/features/userSlice" import { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, } from "@/components/ui/dropdown-menu" import { useTranslations } from "next-intl" import { deleteCookie, getCookie } from "cookies-next" import clsx from "clsx" import { usePathname, useRouter } from "@/i18n/routing" import { useParams } from "next/navigation" // import { CustomDropwdown } from "./DropwDown"

export default function Component({ menuLinks }) { const pathname = usePathname(); const { user } = useAppSelector(store => store.user) const dispatch = useAppDispatch() const { t, i18n } = useTranslations() const tt = useTranslations() const locale = getCookie("NEXT_LOCALE"); const router = useRouter(); const [isPending, startTransition] = useTransition(); const { pathnames, asPath, query } = router;

const langList = [ { value: "pt", label:

    <span>PT</span>
  </div>
},
{
  value: "en", label: <div className="flex items-center gap-2 " >
    <Image src="/imgs/flags/en.png" width={20} height={20} alt="pt" />
    <span>EN</span>
  </div >
},
{
  value: "es", label: <div className="flex items-center gap-2 ">
    <Image src="/imgs/flags/es.png" width={20} height={20} alt="pt" />
    <span>ES</span>
  </div>
},

]

const [lang, setLang] = useState(locale)

useEffect(() => { async function fetchUserData() { try { const res = await api.get(/user/get-user); dispatch(setUser(res.data.data)) } catch (error) { console.log(error) } } fetchUserData() }, [])

const logoutUser = () => { localStorage.clear(); deleteCookie("authToken") deleteCookie("refreshToken") const redierctURI = ${process.env.NEXT_PUBLIC_FIRST_SITE_URL}; window.location.href = redierctURI; }

// const changeLanguage = (e) => { // setLang(e); // router.replace(pathname, { locale: e, scroll: false });

// }; const params = useParams();

function changeLanguage(event) { setLang(event) const nextLocale = event; startTransition(() => { router.replace(pathname, { locale: nextLocale }); }); }

const validPath = (pathname, href) => { if (href == "/") { return pathname == /${locale}; } return pathname?.includes(href); }

return (

{user?.name}

{/* */} changeLanguage(e)} options={langList} val={lang} className="rounded-full bg-[#F0F4F1] focus-visible:ring-0 border-none" />

{ menuLinks.map((link, i) => ( {link.label} )) }

{user?.name}

{/* */} changeLanguage(e)} options={langList} val={locale} className="rounded-full bg-[#F0F4F1] focus-visible:ring-0 border-none" />

) } ### Verifications - [X] I've verified that the problem I'm experiencing isn't covered in [the docs](https://next-intl-docs.vercel.app/). - [X] I've searched for similar, existing issues on GitHub and [Stack Overflow](https://stackoverflow.com/search?q=next-intl). - [X] I've compared my app to [a working example](https://next-intl-docs.vercel.app/examples) to look for differences. ### Mandatory reproduction URL what do i put here ? i dont understand ### Reproduction description Steps to reproduce: 1. Open reproduction 2. Click on … 3. See error: … ### Expected behaviour I want my page not to re-render every time i change the language it is bad user experience

amannn / next-intl