React - Difference between Wrapping Lazy Routes in 1 Suspense vs Separate suspense for each lazy rou-CodePudding

I am using React JS Code Splitting like this

const Home = lazy(() => import('./routes/Home'));
const About = lazy(() => import('./routes/About'));

const App = () => (
  <Router>
    <Suspense fallback={<div>Loading...</div>}>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </Suspense>
  </Router>
);

I want to ask what the difference between wrapping components into 1 Suspense vs Wrapping Lazy Components into suspense for each of them like this. Which is better for performace

import React, { Suspense, lazy } from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';

const Home = lazy(() => import('./routes/Home'));
const About = lazy(() => import('./routes/About'));

const App = () => (
  <Router>
   
      <Routes>
        <Route path="/" element={
            <Suspense fallback={<div>Loading...</div>}><Home />
            </Suspense>}
            
        />
        <Route path="/about" element={
                <Suspense fallback={<div>Loading...</div>}>
                <About />
                </Suspense>} 
        />
      </Routes>
    
  </Router>
);

CodePudding user response：

There's not much difference. It just changes which components get unmounted while waiting for the load to finish. That can matter if you want to hide certain dom elements during the load, but the only part you care about (the loading div) is shown in both cases. #1 will unmount the <Route>s, and thus they show nothing; #2 will keep the <Routes>, but they'll still show nothing (other than the loading indicator)

Which is better for performace

Whichever is faster, it's only going to be by a tiny amount. This is not an area where you need to focus on performance. I would say if you want to show different loading placeholders for the different routes, or if some of them are not lazy loaded, then do #2. Otherwise, do #1.

CodePudding user response：

Using the first approach will help you to use the same fallback UI for all your components: Home, About.

Using the second approach will help you to customize the fallback UI for each component:

<Routes>
  <Route
    path="/"
    element={
      <Suspense fallback={<div>Loading component Home...</div>}>
        <Home />
      </Suspense>
    }
  />
  <Route
    path="/about"
    element={
      <Suspense fallback={<div>Loading component About...</div>}>
        <About />
      </Suspense>
    }
  />
</Routes>

If your goal is to display the same UI between all components, I suggest going with the first approach because each time the component App gets updated it will just update the component Suspense otherwise the second approach requires unmounting and mounting component Suspense.