Data Fetching with Suspense
 

React recently introduced "Concurrent Mode" as an experimental feature, which includes Suspense, a mechanism that lets components wait for any dependent resources - commonly data - to load before they are rendered. 

It allows for orchestrating complex loading sequences and visual transitions in a declarative manner, greatly improving both the developer and user experience. 

​

We start off with an overview of Concurrent Mode, how to adopt it and its notion of interruptible rendering, before exploring what Suspense is (and is not) and how to use it for loading data in your applications:

​

• Traditional data fetching strategies (such as fetching in useEffect) vs the "render-as-you-fetch" pattern.

• Coordinating loading sequences with the <Suspense> and <SuspenseList> components.

• Transitioning between visual states with the useTransition hook.

• Using Suspense in conjunction with REST APIs and GraphQL.

 

Suspense is poised to become the essential method for loading components' asynchronous resources in the near future; this practically oriented talk will position you at the forefront of the latest developments in implementing better performant React applications.