React.lazy React.lazy Code Splitting
Last updated: 2026-11-02
React.lazy React.lazy Code Splitting
React.lazy(() => import('./Page')) turns a component into a chunk that is only downloaded when it is actually needed, and Suspense shows placeholder UI while the chunk is in flight. The first paint then ships only the code of the home page and every other route is fetched on demand, which is the first big win for the speed of a single-page app and the easiest one to measure.
| Group | Routing & State Mgmt |
|---|---|
| Kind | API |
| Since | React 16.6 |
ℹ️ Info The editor transpiles JSX to JavaScript and renders the real UI in a sandbox; components mount automatically — no manual render call needed.
📝 Syntax
import { lazy, Suspense } from 'react'
const AdminPage = lazy(() => import('./AdminPage')) // dynamic import splits the bundle
<Suspense fallback={<p>Loading…</p>}>
<AdminPage /> {/* the chunk is requested at render time and replaces the fallback once ready */}
</Suspense>⚙️ Parameters
| factory | The () => import('./X') factory function: it returns the module promise, and the module needs a default export (since React 18 you can use then to name a named export explicitly). |
|---|
Returns：lazy(factory) returns a new component: the module starts loading on the first render and, until it resolves, throws up to the nearest Suspense boundary so it can show its fallback.
▶ Example
The example runs out of the box: it auto-renders when expanded, and edits take effect instantly.
Output：
Clicking the button shows a "downloading" placeholder for 1.2 seconds and then switches to the loaded content - the fallback to lazy component transition of Suspense (simulated demo).💡 Key Points
🏷️ More Routing & State
💡 Related Cases
📚 Related Tutorials
❓ FAQ
