react-i18next: Too many re-renders on language change

I’m writing my first react app with translations, and only have a single component that does any translations this far.

Changing language causes 19 re-renders of that component.

11:36:37.371 logger.js:23 i18next: languageChanged en
11:37:35.508 Cms.jsx:120 re-render
11:37:35.511 Cms.jsx:120 re-render
11:37:35.515 Cms.jsx:120 re-render
11:37:35.520 Cms.jsx:120 re-render
11:37:35.523 Cms.jsx:120 re-render
11:37:35.528 Cms.jsx:120 re-render
11:37:35.533 Cms.jsx:120 re-render
11:37:35.537 Cms.jsx:120 re-render
11:37:35.540 Cms.jsx:120 re-render
11:37:35.544 Cms.jsx:120 re-render
11:37:35.547 Cms.jsx:120 re-render
11:37:35.549 Cms.jsx:120 re-render
11:37:35.551 Cms.jsx:120 re-render
11:37:35.554 Cms.jsx:120 re-render
11:37:35.557 Cms.jsx:120 re-render
11:37:35.559 Cms.jsx:120 re-render
11:37:35.562 Cms.jsx:120 re-render
11:37:35.565 Cms.jsx:120 re-render
11:37:35.568 Cms.jsx:120 re-render
11:37:35.569 logger.js:23 i18next: languageChanged se

This is my config

i18n
    .use(reactI18nextModule)
    .init({
        resources: {
            se: {
                translation: {
                    ...
                },
            },
            en: {
                translation: {
                    ...
                },
            },
        },
        lng: 'se',
        fallbackLng: 'se',
        interpolation: {
            escapeValue: false,
        },
        react: {
            wait: true,
            bindStore: false,
        },
        debug: true,
    });

My component is a React.PureComponent.

What can I do to get fewer re-renders?

About this issue

Original URL
State: closed
Created 6 years ago
Comments: 25 (12 by maintainers)

Most upvoted comments

Moving the changeLanguage call to an useEffect hook solved it for my case.

  useEffect(() => {
    i18n.changeLanguage(language);
  }, [language]);

matthieu994 on May 18, 2022

I had a similar problem. I’m using i18n with redux, and a custom form of persist-gate.

When the <PersistGate /> component finishes its work it renders the <AppProvider /> which creates the redux store. The issue was that when I changed language it caused a rerender of the <PersistGate />, because i18n instance is configured by default to rerender in the event 'changeLangauge'. The solution: Initialize i18n instance with the option bindI18n: false. In my project I am only writing functional components and useSuspense: false option, so using the hook useTranslation gives me the updated language without causing a rerender of <PersistGate />.

While the source of the issue may be related to my custom <PersistGate /> and how it works, I felt it was important to share in any case someone experiences similar issues.

ranshemt on Nov 16, 2020

withI18n is for v9/v8 version: https://react.i18next.com/legacy-v9/withi18n for newer versions have a look at: https://react.i18next.com/latest/withtranslation-hoc or similar

rerender events, have a look at bindI18n: https://react.i18next.com/latest/i18next-instance

adrai on May 18, 2020