Do nested Suspense components cause a sequential or a parallel load?

Question

I understand that Suspense components are the React-ian approach to code splitting, which makes webpages load faster. Now, say you have a component hierarchy like this:

<App> <Suspense fallback={<FirstLoader/>}> <OuterWrapper> <Suspense fallback={<SecondLoader/>}> <InnerWrapper> {content} </InnerWrapper> </Suspense> </OuterWrapper> </Suspense> </App>

Assume first that only InnerWrapper is lazy-loaded, and in the second case they are both lazy loaded.

Does React defer the loading of InnerWrapper after OuterWrapper is loaded, or are they both loaded simultaneously? Specifically, whether the rendering of the 2nd Suspense's fallback is deferred after the first component is loaded.

Yes. Specifically, whether the rendering of the 2nd Suspense's fallback is deferred after the first component is loaded. I couldn't figure this out in my app because they're loading too fast. — Paul Razvan Berg
– Paul Razvan Berg, Commented Oct 26, 2019 at 18:45
The second Suspense only renders when OuterWrapper is loaded and rendered. I might provide an example to prove that if I find some time. — marzelin
– marzelin, Commented Oct 26, 2019 at 19:08

marzelin · Accepted Answer · 2019-10-26 20:14:26Z

Does React defer the loading of InnerWrapper after OuterWrapper is loaded, or are they both loaded simultaneously? Specifically, whether the rendering of the 2nd Suspense's fallback is deferred after the first component is loaded.

Rendering of the second Suspense will be delayed until OuterWrapper. Everything you pass to OuterWrapper as children:

 <Suspense fallback={<SecondLoader/>}> <InnerWrapper> {content} </InnerWrapper> </Suspense>

Is passed to OuterWrapper as props.children when it is going to be rendered. So, rendering of second Suspense can only happen when OuterWrapper is fetched and executed.

Also, in the case when InnerWrapper is lazy-loaded, it going to be fetched after OuterWrapper is rendered. So, in this case, both components aren't fetched in parallel but one after another.

I've created an example to show it here: https://glitch.com/edit/#!/dusty-ghoul

you can play with delay after which scripts are going to be send to the client by modifying delay parameter here:

// public/index.js const OuterWrapper = React.lazy(() => import("./OuterWrapper.js?delay=5000")); const InnerWrapper = React.lazy(() => import("./InnerWrapper.js?delay=1000"));

Collectives™ on Stack Overflow

Do nested Suspense components cause a sequential or a parallel load?

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related