Lazy loading y Suspense en rutas de React

Cuando trabajas con lazy loading en React, evitas descargar todo el código de tu aplicación en la primera carga. Si un usuario entra al home, no necesita bajar de inmediato el código de perfil, reservas o favoritos. Esta guía es para quienes construyen apps con React y React Router y buscan mejorar el performance real de sus páginas.

La idea central es simple: dividir el código en paquetes más pequeños que se descargan solo cuando se necesitan. Para lograrlo usamos dos herramientas que React nos da de fábrica, lazy y Suspense, y las combinamos con las rutas que ya tenías definidas.

Qué es lazy loading y por qué mejora el performance

A medida que una app crece, cargar todo el código de golpe se vuelve lento. El lazy loading resuelve esto haciendo una carga bajo demanda, de modo que los primeros paquetes que se descargan son mucho más ligeros.

¿Qué es el lazy loading en React? Es una técnica de carga bajo demanda que difiere la descarga del código de un componente hasta el momento del render. Así el usuario solo baja lo que realmente necesita ver.

La función lazy de React permite diferir la carga de código hasta el render [00:39]. En lugar de importar la página de forma tradicional, la envuelves en lazy con una función que ejecuta el import apuntando a la misma URL del componente.

jsx const HomePage = lazy(() => import('./pages/HomePage'));

Y aquí viene un detalle que rompe a muchos: el componente que cargas con lazy debe usar export default. Si tu página estaba definida como export function HomePage, solo tienes que agregarle el default para que el error desaparezca [02:36].

Cómo funciona Suspense y para qué sirve el fallback

Suspense es un componente relativamente nuevo que se renderiza con un fallback mientras el código o el componente aún no está disponible [00:56]. Cuando el contenido llega, el fallback se apaga y muestra la página real.

¿Para qué sirve el fallback en Suspense? Es lo que se muestra en pantalla mientras el componente termina de cargar. Puede ser un texto como "cargando página" o un skeleton para una mejor experiencia de usuario.

El truco elegante de esta clase es crear una función reutilizable llamada withSuspense. Recibe un componente como argumento, tipado con ComponentType, y devuelve un ReactElement [05:14]. Así evitas escribir Suspense una y otra vez con el mismo fallback en cada página.

jsx function withSuspense(Component: ComponentType): ReactElement { return ( <Suspense fallback={<div>cargando página</div>}> <Component /> </Suspense> ); }

Dentro de tus rutas, en lugar de renderizar el componente directo, lo pasas por la función: withSuspense(HomePage) [06:14]. Simple y limpio.

Qué imports necesitas para usar lazy y Suspense

Antes de tocar las rutas, hay que preparar los imports. Además de traer lazy y Suspense desde React, necesitas dos types que hacen posible tipar la función reutilizable.

• lazy y Suspense, ambos desde React [00:32].
• ComponentType, un type de React para el componente que recibes [01:28].
• ReactElement, el type de lo que devuelve withSuspense [01:28].

En el archivo de rutas conviene separar lo que se mantiene de lo que cambia. Se quedan igual el createRouter de React Router, la ruta protegida, el MainLayout, el BookingLayout y el loader [01:44]. Lo que cambia es la forma en que importas las páginas, porque ahora pasan por lazy.

¿Por qué mi componente da error al usarlo con lazy? Porque lazy espera un export default. Si tu página usa un export nombrado, cámbialo a export default y el error se resuelve.

Cómo aplicar Suspense a todas las páginas del proyecto

Una vez que el HomePage funciona con lazy y withSuspense, el proceso se repite en cada página: searchPage, favoritos, profile, login, booking, property y notFound [04:07].

El patrón es siempre el mismo:

1. Cambia el import tradicional por uno envuelto en lazy.
2. Agrega export default al componente de la página.
3. Reemplaza el uso directo del componente por withSuspense(...) en las rutas.

Después de migrar todo, puedes borrar los imports viejos que dejaste comentados para limpiar el código [04:42].

En la práctica, cuando recargas el HomePage, verás el mensaje "cargando página" por muy poco tiempo, porque lo que más tarda es la imagen principal; el resto del contenido usa precarga [06:32]. Ese fallback de texto es un ejemplo mínimo perfecto para entender el flujo, pero puedes reemplazarlo por un skeleton para una experiencia más amena.

Un buen criterio para elegir dónde aplicarlo: enfócate en las páginas más pesadas para la primera carga, que son las que más se benefician de diferir su código. En la siguiente etapa se aborda cómo manejar errores por ruta con ErrorElement y estados de error más claros.

¿Ya identificaste cuáles páginas de tu proyecto son las más pesadas para aplicarles lazy loading? Cuéntame en los comentarios cómo te fue con la migración.