react reactjs Suspense Lazy

Un poco de Suspense con React.lazy()

Creo que los equipos de React son bastante creativos con los nombres de sus funcionalidades, métodos y componentes. Suspense y lazy() son dos ejemplos. ¿Estás de acuerdo?

“OJO: Esta característica todavía no está disponible para rendering en el lado del servidor.”

¿Qué es Suspense y qué es lazy()?

El mes pasado salió la versión 16.6 de React y con ella nuevas características y mejoras. Entre estas características están <Suspense /> y React.lazy().

¿Para qué sirve Lazy()?

Lazy()  te ayuda a dividir el código y a importar componentes a tu script.

Desde mi punto de vista, lo interesante de Lazy() es que con esta herramienta tu app no se carga toda de una vez. Lazy() ayuda a que el contenido no necesario en la carga inicial no se cargue y solamente lo haga para el contenido que los usuarios necesitan ver por pantalla.

¿Y </Suspense> ?

Lazy() no está solo. El componente Suspense (</Suspense>), que debes importar desde React y que tiene que estar necesariamente antes de tu <Product /> cargado perezosamente  sirve para gestionar tus importaciones de lazy(). Cuando veas el ejemplo, lo entenderás muy rápidamente.

Con Suspense puedes envolver tu propio JSX y, además, dispones de un fallback. Al fallback puedes pasarle un componente, o cualquier JSX, o marcado para usarlo como loader. Esta característica es ideal para conexiones lentas. La experiencia de usuario lo agradece. :) Además de, obviamente, reducir el tamaño del paquete principal. Es, por lo tanto  una forma de mejorar el rendimiento de tus aplicaciones.

Un ejemplo:

Envés de importar tu componente Product, como habitualmente, puedes transformarlo en lazy(). O sea, sustituir

import Post from "./product";

Por
const Post = React.lazy(() => import("./product"));

Puedes ver un ejemplo en el sandbox siguiente:

 

Conclusión

Resumiendo, Suspense y lazy() son una solución nativa - alternativa a bibliotecas externas como react-loadable - que te permiten cargar componentes, o imágenes, de forma diferida.  Es importante saber que adoptar estas funcionalidades no tendrá impacto en tu código actual. Puedes leer más sobre Suspense y lazy en el blog de React.

 

¿Has probado <Suspense /> con lazy()? ¿Cómo ha sido tu experiencia?

Fuentes

El Machine Learning debe centrarse en las personas

Artículo anterior

¿Qué problema hay en utilizar TDD?

Siguiente artículo
I help Organizations to use Technology to improve people's lives

También te puede interesar

¿Por qué utilizar Hooks de React?

Algunos conceptos básicos de React: JSX

Algunos conceptos básicos de React: Estados

Algunos conceptos básicos de React: Props