Introduction

In Chapter 10, Behind the Scenes of React and Optimization Opportunities, in the Reducing Bundle Sizes via Code Splitting (Lazy Loading) section, you learned about React’s <Suspense> component and how it may be used in the context of lazy loading and code splitting to show fallback content while a code bundle is being downloaded.

As explained there, the purpose of the Suspense component is to simplify the process of showing fallback content, which, in turn, can lead to a better user experience. Since staring at outdated content or a blank page is not something most users appreciate, having a built-in feature that shows alternative content is very convenient.

In this chapter, you’ll learn that React’s Suspense component is not limited to being used for code splitting. Instead, it can also be used for data fetching to show some temporary content while data is being loaded (e.g., from a database). Though, as you will also learn, Suspense...