practiceadvanced
On-demand loaded modal
A modal with a heavy editor. We don't want to download its code until the user opens it. Use lazy() to defer the import and Suspense to show feedback while it loads.
Objectives
- 1.Implement EditorModal in a separate file (export default)
- 2.In App use lazy(() => import(
./EditorModal.js)) - 3.Simulate latency by wrapping the import in a 700ms setTimeout
- 4.Mount the component only when open === true
- 5.Wrap it in <Suspense fallback=...>
- 6.On first open,
loading...is shown, then it appears - 7.On close and reopen, the module is cached — no spinner
your code
Hint
lazy() only executes the function when the component renders. Once the promise resolves, React caches the module — subsequent opens are instant.
Related concepts
Was this helpful?
Sign in to give feedback