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";
Porconst 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
