The answer
React.lazy lets you render a component imported dynamically, so its code is loaded only when needed. You wrap the lazy component in a Suspense with a fallback, and the fallback shows while the code loads.
What Is React Suspense and How Does Lazy Loading Work?
How does React.lazy work?
More FAQs in What Is React Suspense and How Does Lazy Loading Work?
Suspense is a component that lets you show a fallback while a child is not ready, like while code is loading or data is being fetched. It makes loading states declarative instead of manual.
Without it, your entire app ships in one bundle, slowing the first load. Lazy loading splits routes so users only download the code for the page they are on, which improves initial load significantly.
When a lazy component is requested, React pauses rendering it, shows the Suspense fallback, and resumes once the code is loaded. The user sees a spinner instead of a blank screen.
Still have questions?
Browse all our FAQs or reach out to our support team
Want to upskill yourself?
Your learning library
Small steps. Big possibilities.
Find your next course. Build something great.