A brief analysis of SuspenseList in React18 and what is its use

How to quickly get started with VUE3.0: Learn about

the past and present of Suspense.

This feature appeared in the historical versions of React. The first time was version 16.6, which released the Suspense component that supports code splitting. Data extraction is now supported in version 16.9. Interested students can move to React 's changelog .

The simple use of Suspense

has been introduced before. We only use an example to review the concept and use

// This component is dynamically loaded const OtherComponent = React.lazy(() => import('./OtherComponent'));

function MyComponent() {
  return (
    <React.Suspense fallback={<Spinner />}>
      <div>
        <OtherComponent />
      </div>
    </React.Suspense>
  );
}

When the OtherComponent component does not yet have rendering conditions, the component passed in by fallback will be used for prefabricated rendering. The specific manifestations of the lack of rendering conditions here are that the data acquisition time is long, the component structure is complex, etc., but we do not want these to affect the first screen rendering or initialization of the application. The previous Suspense article has introduced it, so I will not go into details.

What is SuspenseList

can be easily understood literally. That is, if there are multiple Suspense in our code, how should we control their display order and display method? Therefore, React officially provides us with the SuspenseList component.

<SuspenseList revealOrder="forwards">
  <Suspense fallback={'Loading...'}>
    <ProfilePicture id={1} />
  </Suspense>
  <Suspense fallback={'Loading...'}>
    <ProfilePicture id={2} />
  </Suspense>
  <Suspense fallback={'Loading...'}>
    <ProfilePicture id={3} />
  </Suspense>
  ...
</SuspenseList>

Let’s first introduce the only two Props of SuspenseList

revealOrder represents the loading order of sub Suspense . The optional values ​​​​are forwards , backwards , and together .

• forwards represents the same level. It is displayed from front to back, regardless of the request speed. Displaying backwards first

• backwards the opposite of forwards.

• together means that all suspenses are displayed at the same time when they are ready, instead of displaying them one by one.

tail specifies how to display the behavior of unloaded items in SuspenseList

By default, SuspenseList will display all fallback

• collapsed

• SuspenseList the list

and only display the list.

• The next fallback

hidden unloaded project does not display any information

ps: SuspenseList only works on Suspense or SuspenseList of the direct sub-level, and will not work on the grandchild nodes.

The role of SuspenseList

SuspenseList allows us to perform composite orchestration of a group of Suspense behaviors. Although the demo in the demonstration is relatively simple, in a relatively large project, we often use Layout for layout. Take our common middle and back-end management platforms and the C-side main page as an example.

In the middle and back-end systems, we often use the top bar + sidebar + main page layout method. At this level, the current industry in the industry mostly practices micro-front-end routines, such as qiankun.js , including the author’s team. Explored a set of own micro front-end implementation system. If you are on a C-side page, it may not be appropriate to use a micro front-end method. If there are requirements for multi-block rendering in the page, you can use SuspenseList and Suspense combined with the ability of React backend to render SSR to achieve independent block rendering in a more systematic way. Effects of loading order and behavior.