prácticaavanzado
Modal cargado on-demand
Un modal con un editor pesado. No queremos descargar su código hasta que el usuario lo abra. Usa lazy() para diferir el import y Suspense para mostrar feedback mientras llega.
Objetivos
- 1.Implementa
EditorModalen archivo aparte (export default) - 2.En App usa
lazy(() => import(./EditorModal.js)) - 3.Simula latencia envolviendo el import en un
setTimeoutde 700ms - 4.Monta el componente solo cuando
open === true - 5.Envuélvelo en
<Suspense fallback=...> - 6.Al abrir por primera vez se ve
cargando..., luego aparece - 7.Al cerrar y reabrir, el módulo ya está cacheado — no hay spinner
tu código
Pista
lazy() solo ejecuta la función cuando el componente se renderiza. Una vez resuelta la promesa, React cachea el módulo — las siguientes aperturas son instantáneas.
Conceptos relacionados
¿Fue útil?
Inicia sesión para dar feedback