useSuspense causes infinite rerender loop in NextJS app

[artuska]

🐛 Bug Report

Setting react.useSuspense: true in i18next init options causes infinite interface rerenders when using useTranslation hook.

To Reproduce

Just set useSuspense to true.

const i18nextOptions: InitOptions = {
  debug: false,
  lng: "en",
  fallbackLng: "en",
  load: "currentOnly",
  preload: false,
  interpolation: {
    escapeValue: true,
  },
  react: {
    useSuspense: false, // default is `true` — https://github.com/i18next/next-i18next/issues/2095
  },
};

You can also enable debug with debug: true and see in the console infinite localeChanged events.

Expected behavior

No infinite rerender loop.

Your Environment

• node 20.18.0, npm 10.8.2
• "react": "18.3.1"
• "react-i18next": "15.4.0"
• "next-i18next": "15.4.2"
• "i18next": "23.16.8"
• os: any os

[adrai]

Like said in this comment, you should not use suspense => i18next/next-i18next#2095 (comment)

And also stated in the readme: https://github.com/i18next/next-i18next?tab=readme-ov-file#asynchronous-i18next-backends

[artuska]

If i don't use useSuspense: true then my translation keys are “blinking” — first my translation key appears for 0.1 second and then translation text appears.

[artuska]

If i don't use useSuspense: true then my translation keys are “blinking” — first my translation key appears for 0.1 second and then translation text appears.

Wrapped my page code in <Suspense> component.

[adrai]

You should not need to wrap your code with Suspense if you don't use suspense...
Please provide a minimal reproducible example repository that illustrates your issue.