Code splitting con React.lazy y Suspense

El problema: un bundle gigante

Cuando empaquetas una aplicación React, todo el código de todos los componentes acaba en un único archivo (el bundle). Si tu app es grande, el navegador tiene que descargar, analizar y ejecutar todo ese JavaScript antes de pintar la primera pantalla, aunque el usuario solo vaya a ver la página de inicio.

El code splitting (división de código) parte el bundle en trozos más pequeños que se cargan solo cuando hacen falta. React lo facilita con dos piezas: React.lazy y <Suspense>.

React.lazy: importar un componente de forma diferida

React.lazy recibe una función que devuelve un import() dinámico. El módulo del componente no se descarga hasta que React intenta renderizarlo por primera vez:

import { lazy } from "react";

// El código de Panel vive en su propio chunk y se descarga bajo demanda.
const Panel = lazy(() => import("./Panel"));

El import("./Panel") debe apuntar a un módulo con un export default que sea el componente.

Suspense: qué mostrar mientras carga

Como la descarga es asíncrona, hay un instante en el que el componente todavía no está disponible. <Suspense> define el fallback (un placeholder) que se muestra mientras se resuelve la carga:

import { lazy, Suspense } from "react";

const Panel = lazy(() => import("./Panel"));

function App() {
  return (
    <Suspense fallback={<p>Cargando…</p>}>
      <Panel />
    </Suspense>
  );
}

• Mientras Panel se descarga, el usuario ve Cargando….
• Cuando termina, React reemplaza el fallback por el componente real.
• Un mismo <Suspense> puede envolver varios componentes diferidos; mostrará el fallback hasta que todos estén listos.

Cuándo usarlo

El code splitting brilla en límites naturales: rutas (cada página en su chunk), modales pesados, editores, gráficas… Cualquier parte que no se necesita en la carga inicial. El resultado es un arranque más rápido: el usuario descarga menos JavaScript para ver la primera pantalla.

Nota del entorno: React.lazy y Suspense dependen de carga asíncrona de módulos, así que en estos ejercicios los estudiamos a nivel conceptual (en los cuestionarios). Los hooks síncronos sí los practicarás con código real.