Prevent rerender of language switcher

[riccardolardi]

I don't know whether this is expected but I assume it's an issue: my language switcher component does a full rerender each time I switch the language, meaning the transition of the toggle is interrupted. I'm following the guide from the docs: https://next-intl-docs.vercel.app/docs/routing/navigation#userouter-change-locale

Any help is greatly appreciated.

"use client";

import { SegmentedControl } from "@mantine/core";
import { locales, type Locale } from "~/i18n";
import { usePathname, useRouter } from "~/lib/utils/i18n";
import { useLocale } from "next-intl";
import { useState } from "react";

export default function LanguagePicker() {
  const locale = useLocale();
  const router = useRouter();
  const pathname = usePathname();
  const [selected, setSelected] = useState<Locale[number]>(locale);

  function onChange(value: string | null) {
    if (value) {
      setSelected(value);
      router.replace(pathname, { locale: value as Locale, scroll: false });
    }
  }

  return (
    <SegmentedControl
      data={locales
        .map((locale) => ({
          value: locale,
          label: locale.toUpperCase(),
        }))
        .reverse()}
      value={selected}
      onChange={(value: string | null) => onChange(value)}
    />
  );
}

[amannn]

Next.js remounts the relevant page and layout when a dynamic segment like [locale] changes, therefore this behavior is indeed expected.

For cross-page transitions I guess you'd need something like View Transitions (example) or Framer Motion (there might be rough edges though).

[ghost]

In my case if I call router.push(pathname, { locale: newLocale }), it rerenders too many times for all client components,
infinite rerender until the locale switching ended

[ghost]

@amannn
In my case if I call router.push(pathname, { locale: newLocale }), it rerenders too many times for all client components,
infinite rerender until the locale switching ended, can we change that?

[sukhantharot]

I have same problem

import { usePathname, useRouter } from '@/i18n/navigation';
import { useSearchParams } from 'next/navigation';
 const switchLocale = (newLocale: string) => {
    const query = Object.fromEntries(searchParams.entries());
    router.push({ pathname, query }, { locale: newLocale });
  };
  

from my code will render 3 times after change language