API · Code splitting
lazy
Importar bajo demanda
lazy() recibe una función que devuelve un import dinámico, y produce un componente que carga su código solo cuando se renderiza por primera vez. Combinado con Suspense, divide el bundle automáticamente.
Dónde brilla
Vistas que no se ven hasta que el usuario navega, modales pesados que pocos abren, editores ricos, gráficos. Todo lo que infla el bundle inicial sin justificar su coste para el primer pintado.
Suspense obligatorio
Mientras el código se descarga, el componente suspende. Necesitas un <Suspense fallback=...> arriba o React lanza un error.
Tropiezos comunes
- 01lazy SOLO acepta un default export — re-exporta si tu módulo usa named exports.
- 02Cargar todo lazy mata el TTI: el primer click se siente lento. Mide qué vale la pena diferir.
- 03En SSR, Suspense + lazy se comporta distinto — revisa la doc del framework (Next, Remix).
¿Fue útil?
Inicia sesión para dar feedback