Github Dashboard
Homereact
(old way)
react
(One Suspense)
react
Waterfall (2 Suspense)
react
side-by-side
GitHub

What is it?

This is a demo of React.Suspense in data fetching scenarios.
Main use case is typically showing a loading spinner.
Suspense helps to simplify the code structure for handling asynchronously data fetched even when it is done incrementally.

Choose one of these different scenarios:

  • 🆕Experimental, RFC-229 use(await fetch) Fetching all data and use latest support of async data fetching via `const data = use(await fetch)`
  • Old way All or nothing: Fetching all data in a top-level `useEffect()` + props-drilling
  • With One Suspense Global Spinner Waiting until all data got fetched (modern Promise-based way)
  • Optimised Suspense Incremental: Showing results incrementally (waterfall) as soon as they got loaded. (modern Promise-based way)
  • Side-by-Side Comparison: Show incrementally loading and wait-for-all