Using React Suspense with react-router-dom

Question

I am trying to implement lazy loading to my projects so I can lazy load routes of react-router-dom. While going through internet I noticed that there are two ways to implement it - wrapping all routes with one React.Suspense or putting every page withing its own React.Suspense. The thing is that I would like to know if there are any differences between these two methods and if there are, what are their's advantages and disadvantages?

Routes wrapped in one Suspense

<React.Suspense fallback={<p>Loading...</p>}>
            <Routes>
              <Route path="/" element={<MainPage/>}></Route>
              <Route path="/todo/:todoID" element={<TodoPage/>}></Route>
              <Route
                path="/user/:user"
                element={<UserTodos/>}
              ></Route>
            </Routes>
</React.Suspense>

Every route with its own suspense

            <Routes>
              <Route
                path="/"
                element={
                  <React.Suspense fallback={<p>Loading...</p>}>
                    <MainPage />
                  </React.Suspense>
                }
              ></Route>
              <Route
                path="/todo/:todoID"
                element={
                  <React.Suspense fallback={<p>Loading...</p>}>
                    <TodoPage />
                  </React.Suspense>
                }
              ></Route>
              <Route
                path="/user/:user"
                element={
                  <React.Suspense fallback={<p>Loading...</p>}>
                    <UserTodos />
                  </React.Suspense>
                }
              ></Route>
            </Routes>

I'd like to know this too myself

JPG
– JPG

2022-12-11 12:37:46 +00:00
Commented Dec 11, 2022 at 12:37 — JPG
– JPG, Commented Dec 11, 2022 at 12:37

Arpan Saha · Accepted Answer · 2023-07-17 15:29:37Z

0

I have never tried this myself practically. But intuitively my guess would be that:

If you wrap everything in one root Suspense, that single fallback will be shown for every suspended route.
But if you wrap every route in its own suspense block, the corresponding fallback will be shown for each route.

This is also indicated by the docs:

When a component suspends, the closest parent Suspense boundary switches to showing the fallback.

So if you want to show different fallbacks for different routes, you may choose the second approach. Else if the fallbacks are the same for all routes, then the first approach would be more maintainable.

answered Jul 17, 2023 at 15:29

Arpan Saha

3161 gold badge2 silver badges6 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Using React Suspense with react-router-dom

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related