Architectural Lazy Loading with React.lazy
Learn how React.lazy defers rendering work by splitting the component tree, allowing React to delay non-critical code and schedule it only when it becomes necessary.
Large React applications rarely grow evenly. A small part of the UI is commit-critical, navigation, page framing, and primary content that users need for orientation. But other parts are optional, deeply nested, or used only after a deliberate interaction, such as admin tools, analytics panels, modals, and settings pages.
If everything ships in one bundle, the browser must download, parse, and evaluate JavaScript for all components before React can even attempt to render them. This increases bundle size and delays the first commit. Interactivity is postponed because React must wait for unnecessary code to finish loading and executing before the UI becomes responsive.
Code splitting solves this by turning component code into an on-demand dependency. Instead of paying the full JavaScript cost up front, we delay loading non-critical features until the user is likely to need them, allowing React to commit useful UI sooner and progressively “upgrade” the page as more code becomes available.
How React.lazy() work
React.lazy() is primarily a render-deferral mechanism. It lets a component’s module load asynchronously, so React can encounter a component whose code isn’t ready to execute yet. From React’s perspective, this is similar to missing data: the subtree cannot be completed until the dependency is available.
When React renders a lazy component, it tries to resolve the module. If it isn’t loaded yet, React suspends that subtree by throwing a Promise. A nearby Suspense boundary must handle this, defining where React can pause and what fallback UI to commit in the meantime. Meanwhile, React can continue rendering and committing other parts of the tree.
React.lazy makes component code part of render eligibility, just like data. If the code isn’t ready, React suspends. Instead of imperatively deciding when to load code, you declare which components are allowed to be deferred. React then renders what it can, suspends where it must, and updates the UI when the module arrives.
Lazy ...