12 Integrating data fetching with Suspense

The React team has a mission to maintain and develop a product that makes it as easy as possible for developers to create great user experiences. In addition to writing comprehensive documentation, providing intuitive and instructive developer tools, authoring descriptive and easily actionable error messages, and ensuring incremental upgrade paths, the team wants React to make it easy to provide fast-loading, responsive, and scalable applications. Concurrent Mode and Suspense offer ways to improve the user experience, orchestrating the loading of code and resources, enabling simpler, intentional loading states, and prioritizing updates that let users get on with their work or play.

But the React team doesn’t want hooking into Concurrent Mode to be a burden on developers; they want as many of the benefits as possible to be automatic and any new APIs to be intuitive and in step with existing mindsets. So, Concurrent Mode is still flagged as experimental as the APIs are tested and tweaked. Hopefully, we won’t be kept in suspense for much longer! [No! We agreed, no suspense jokes—ed]

12.1 Data fetching with Suspense

12.1.1 Upgrading promises to include their status

12.1.2 Using the promise status to integrate with Suspense

12.1.3 Fetching data as early as possible

12.1.4 Fetching new data

12.1.5 Recovering from errors

12.1.6 Checking the React docs

12.2 Using Suspense and error boundaries with React Query

12.3 Loading images with Suspense

12.3.1 Using React Query and Suspense to provide an image-loading fallback

12.3.2 Prefetching images and data with React Query

Summary