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

Question

I just started working on this new React app.

It was using <Suspense /> element in the component but I removed it. Then application is crashed with above error.

Is there any easy fix without know too much about <Suspense /> ?

Answer 1

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>

Answer 2

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.

Answer 3

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>
} />

Answer 4

One error we are easy to make:

// Error: In the fallback component, don't use i18n!
// <Suspense fallback={<div>{t('loading')}... </div>}>

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

Answer 5

Also, dont forget about fallback prop in Suspense component - it wont work without it.