React-i18next suspense

Question

I m using React-i18next just like the example

import React, { Suspense } from 'react';
import { useTranslation } from 'react-i18next';

function App() {
  return (
    <Suspense fallback="loading">
      <MyComponent />
   </Suspense>
   );
}

But Suspense is breaking one of my other components, namely react-masonry-layout. Is it possible to not using Suspense?

Thanks.

Answer 1

react-i18nnext uses Suspense by default. If you don't want to use it, you have to specify that in your configuration. If you have a i18n config file, you can set the useSuspense flag to false in the react section of the init object.

//Example config
i18n
.use(Backend)
.use(LanguageDetector)
.use(initReactI18next)
.init({
   fallbackLng: "en",
   debug: true,
   resources: {

   },
   interpolation: {
     escapeValue: false,
   },
  react: {
     wait: true,
     useSuspense: false,
  },
})

Or you can just set the flag in your component.

<MyComponent useSuspense={false} />

Just be aware that choosing not to use Suspense has its implications. You have to write checks to handle the 'not ready' state ie: have a loading component render when state is not ready and your component render when the state is ready.Not doing so will result in rendering your translations before they loaded.