React Hooks in Action

11 Code splitting with Suspense

This chapter covers

• Importing code dynamically with the import function
• Loading components when they’re needed with React.lazy
• Specifying fallback UI declaratively with Suspense components
• Understanding how lazy and Suspense work together
• Specifying error fallback UI declaratively with error boundaries

It’s common for app users to interact with some components more than others. In the bookings app, for example, users often visit the Bookings page without switching to the Bookables or Users pages, and on the Bookables page they may never bring up the New or Edit forms. To manage the amount of code loaded by the browser at any one time, we can use a technique called code splitting; rather than loading all of ...