javascript - Multiple Suspense declaration in React - Stack Overflow

admin管理员组

文章数量:1389555

For example I have this declaration:

Scenario 1:

const ComponentA = lazy(() => import('pages/ComponentA'));
const ComponentB = lazy(() => import('pages/ComponentB'));

<Router>
  <Switch>
     <Suspense fallback={'loading...'}>
       <Route path="/A" ponent={ComponentA} exact/>
       <Route path="/B" ponent={ComponentB} exact/> 
     </Suspense>
  </Switch>
</Router>

This scenario is fine if the loading dependency of ComponentA is just 1.

But for Scenario 2: what if I have multiple dependency in ComponentA?

Code 2

import Dependency1 from 'ponent/dependency1';
import Dependency2 from 'ponent/dependency2';

const ComponentA = () => {
   return (
     <div>
       <Dependency1/>
       <Dependency2/>
     </div>
   );
}

is it okay to separate the Suspense declaration for each Dependency? like this:

Code 3

 const Dependency1 = lazy(() => import('ponent/dependency1'));
 const Dependency2 = lazy(() => import('ponent/dependency2'));

 const ComponentA = () => {
   return (
     <div>
       <Suspense fallback={'Loading Dependency1'}>
         <Dependency1/>
       <Suspense/>
       <Suspense fallback={'Loading Dependency2'}>
        <Dependency2/>
       <Suspense/>
     </div>
   );
}

then I'll remove the Suspense declaration in the Router file...

My Question is it okay to have a structure like Code 3 since I want to have a multiple separate loading indicator in each dependency?

Is there any downside of this approach like performance or multiple request in each sub-ponent since I'm code splitting each Dependency?

For example I have this declaration:

Scenario 1:

const ComponentA = lazy(() => import('pages/ComponentA'));
const ComponentB = lazy(() => import('pages/ComponentB'));

<Router>
  <Switch>
     <Suspense fallback={'loading...'}>
       <Route path="/A" ponent={ComponentA} exact/>
       <Route path="/B" ponent={ComponentB} exact/> 
     </Suspense>
  </Switch>
</Router>

This scenario is fine if the loading dependency of ComponentA is just 1.

But for Scenario 2: what if I have multiple dependency in ComponentA?

Code 2

import Dependency1 from 'ponent/dependency1';
import Dependency2 from 'ponent/dependency2';

const ComponentA = () => {
   return (
     <div>
       <Dependency1/>
       <Dependency2/>
     </div>
   );
}

is it okay to separate the Suspense declaration for each Dependency? like this:

Code 3

 const Dependency1 = lazy(() => import('ponent/dependency1'));
 const Dependency2 = lazy(() => import('ponent/dependency2'));

 const ComponentA = () => {
   return (
     <div>
       <Suspense fallback={'Loading Dependency1'}>
         <Dependency1/>
       <Suspense/>
       <Suspense fallback={'Loading Dependency2'}>
        <Dependency2/>
       <Suspense/>
     </div>
   );
}

then I'll remove the Suspense declaration in the Router file...

My Question is it okay to have a structure like Code 3 since I want to have a multiple separate loading indicator in each dependency?

Is there any downside of this approach like performance or multiple request in each sub-ponent since I'm code splitting each Dependency?

• javascript
• reactjs
• typescript
• react-hooks
• react-suspense

Share Follow edited Jun 16, 2020 at 9:44 ajbee asked Jun 16, 2020 at 9:13 ajbeeajbee 3,65155 gold badges3131 silver badges5858 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 8

Sure, this approach is totally fine, especially when you want to have different loaders for different ponents.

There is small downside you mentioned, multiple request for each lazy ponent, but it would not matter too much. If some ponents are conditional it would even be better to use multiple loaders since some users might not even need Dependency2 at all, for example.

One thing to consider is "loaders clutter". It might be better from UX perspective to have skeleton page instead of 4-5 different loaders which are going to load separately and page might even jump unexpectedly.

本文标签： javascriptMultiple Suspense declaration in ReactStack Overflow