React.lazy and Suspense — Lazy Components
Split code by route or widget. Lazy-load components with React.lazy and show Suspense fallbacks so the rest of the page stays interactive.
Why code-splitting?
Goal: Ship faster by loading code only when needed.
- React.lazy for on-demand components
- Suspense fallback while loading
- Keep the rest of UI usable
Targets for splitting
- Routes and big screens
- Rarely used panels (charts, editors)
- 3rd-party heavy widgets
Pick small boundaries near slow parts.
All lessons in this course
- React.lazy and Suspense — Lazy Components
- Route-based & Component-level Splitting
- Bundles, Cache & Preloading Hints