Code splitting

Q: How deeply does React Hooks in Action: With Suspense and Concurrent Mode cover code splitting?

Explains dynamic imports, lazy components, Suspense fallbacks, and route splitting; defers detailed error fallback handling.

As explained in React Hooks in Action: With Suspense and Concurrent Mode

Code splitting is a technique that divides an application's code into separately loadable bundles.

Code splitting divides an application into separately loadable bundles instead of sending all code to the browser initially. Less-used routes or bulky components load when users need them, reducing the initial bundle. section 11.0

React combines dynamic import with lazy to load components on demand and Suspense to render fallback UI while they are unavailable. This keeps rendering declarative rather than manually updating the DOM. section 11.2

Split an application by route

A bookings app can lazy-load its Bookings, Bookables, and Users pages. Visiting Users loads that page and its dependencies, while a PageSpinner appears; unused page code remains unloaded. Nested Bookables routes can split their view, edit, and new-form components similarly. section 11.2.4

How React Hooks in Action: With Suspense and Concurrent Mode covers it

Cover of React Hooks in Action: With Suspense and Concurrent Mode

liveBook manning.com

Read React Hooks in Action: With Suspense and Concurrent Mode on liveBook Get the book at manning.com

Related concepts

dynamic importproduced by · Dynamic import is a language feature that asynchronously loads a module at runtime and returns a promise for its module namespace.
lazyuses · React.lazy is a React API for defining a component whose code is loaded asynchronously when needed.
Viteused by · Vite is a frontend development tool that provides a development server and production build pipeline for modern web applications.
lazy initializationuses · Lazy initialization is a technique that postpones creating, retrieving, computing, or loading a value or resource until it is needed.

This explainer was generated by Manning's knowledge graph from the text of React Hooks in Action: With Suspense and Concurrent Mode. The section links point to the parts of the book it draws on.