A React component suspended while rendering, but no fallback UI was specified

I know it's not exactly @IshanPatel's problem but what can cause this error message is if you use a hook like useTranslation() directly inside of the function holding <Suspense />. The solution is to move that code simply into a separate function and have the hook there (see screenshot).

This came up first on Google and I guess someone could waste a long time on finding a fix so I wanted to share it as comment.

Screenshot


You have 2 options:

  1. Without Using suspense, you can configure that i18n.js like this:

    i18n
      .use(XHR)
      .use(LanguageDetector)
      .init({
        react: { 
          useSuspense: false //   <---- this will do the magic
        }
    });
    
  2. Using Suspense, for example:

    <Suspense fallback={<div>Loading... </div>}>
          <App />
    </Suspense>

Removing React.lazy is not a good idea. Since if your application grows it will take too much time to load the home page.

For react-router v6+ we have the following:

<Route path="about" element={
  <React.Suspense fallback={<>...</>}>
    <About />
  </React.Suspense>
} />

In order to fix this without putting Suspense back in, you would need to get rid of usages of React.lazy.

Tags:

Reactjs