React Concurrent Mode and Suspense Demo.
This project contains example code demonstrating React's upcoming Concurrent Mode and Suspense features.
Instructions
First, run
npm install
to install project dependencies.
Start the local development server @ localhost:3000 via
npm start
Overview
The examples are:
-
ex01
Demonstrates how a React application becomes unresponsive as the component tree grows, due to the blocking nature of React's render process.
-
ex02
Applies non-blocking rendering - a core Concurrent Mode feature - to
ex02
, allowing the application to stay responsive throughout. -
ex03
Illustrates the problem of components fetching their data dependencies without any mutual coordination, resulting in a broken user experience with a lot of loading states ("spinners") being displayed.
-
ex04
Improves
ex03
by implementing data fetching with Suspense, enabling easy orchestration of intentional, user-friendly loading sequences. -
ex05
A rewrite of
ex04
that utilizes a third 3rd party library with Suspense integration, react-query, for data fetching.
To run each example, see src/index.js
.
Comments on example ex04
In contrast to the useSWR
hook - from the 3rd party swr library - used in ex03
, in this example a custom useFetch
hook, designed to be compatible with the new Suspense mechanism, is used for data fetching (see further comments in src/ex04/fetch.js
).
The data fetching pattern implemented in this example differs significantly from ex03
:
-
In
ex03
, a component such asUser
is rendered first, before data fetching commences.The built-in
useEffect
hook is typically used for managing data fetching (the 3rd partyuseSWR
hook utilizesuseEffect
in its implementation) and an effect is run after a component's initial render.The React documentation refers to this pattern as fetch-on-render.
-
In
ex04
, data fetching starts before rendering the component; in theApp
component, theselectUser
event handler initiates work in the background via astartTransition
call that runs the following:-
A custom
prefetch
method (seesrc/ex04/fetch.js
), which immediately kicks off data fetching for the selected user. -
A low-priority state update of the
showProfile
flag.
Updating
showProfile
totrue
will start to render the user profile view as part of the background work. When theUser
component is rendered, the data for the selected user may already have arrived and thus React will transition from showing the list of users to the user profile view.If the data is not available the component will suspend. Again, all of this occurs in the background until the
User
component's data is ready and a transition to the user profile view is made, a period during which the user sees a pending indicator (or the Suspense fallback if the data fetching takes too long, specified by the transition timeout).This pattern of fetching data as early as possible is called fetch-as-you-render.
-
References
React Concurrent Mode documentation
Dan Abramov's "inaugural talk" about Concurrent Mode
Contact
Marc Klefter | marc.klefter@edument.se