Lazy Loading en React co be Jose CastellanoéQué es el Lazy Loading? El Lazy Loading (carga perezosa) es una técnica de optimizacién que nos permite retrasar la inicializaci6n o la carga de algun elemento hasta que sea necesario. Esto se hace para mejorar la eficiencia de nuestra aplicaci6n, ya que reduce la cantidad de trabajo a realizar en la carga inicial de esta. Esto produce cosas asi: Seguro que te has encontrado algo parecido, Y una de las razones es porque no usan el Lazy Loading. & Jose CastellanoéPor qué usar Lazy Loading? Como habras podido sacar en conclusion, por la diapositiva anterior, usar el Lazy Loading, segtn en qué situaciones, es fundamental para mejorar el rendimiento de tu aplicacién. Si no lo haces perderas: ¢ Un contacto para tu lista * Una llamada de ventas * Unclick en un anuncio Lo que se traduce en dinero. Por tanto, es clave tener una pagina bien optimizada y que cargue rapido. Esto es lo que queremos conseguir. 100 es muy dificil. 90 para arriba es el objetivo. be Jose Castellano~Donde lo puedes usar? Se puede usar tanto en imagenes o iframes (esto es propio de HTML): Como en componentes de React: Esto es un import dinamico. Te ensefo a usarlo en las siguientes diapositivas: & Jose Castellano~Como usar Lazy Loading en React? Necesitas dos cosas. >) La funcién React.lazy() r >) El componente React.Suspense be Jose CastellanoLa funcion React.lazy() Permite renderizar importaciones dinamicas de manera muy sencilla. Devuelve un componente de React. Mientras ese componente no se haya cargado, no hara el intento de renderizar. Usaremos Suspense para mostrar algo mientras la funci6n lazy carga el componente. Recibe un parametro, que tiene que ser una funcién que devuelva una Promise. React no llamara a esta funcién hasta que no intentes renderizar el componente devuelto. Ademas, tanto la Promise, como el valor resulto de esta, se almacenaran en caché. Por lo que React solo tendra que llamar una vez a la funcién. Después el resultado se guardara en memoria. be Jose Castellano GaLa funcion React.lazy() En este ejemplo, cargamos, mediante un import dinamico, y la funcidn lazy, el componente MarkdownPreview. iMuy importante! Este componente tiene que ser exportado por defecto. (export default MarkdowPreview) be Jose CastellanoEl componente React.Suspense Este componente sirve para envolver a otro que puede que todavia no haya cargado. También puedes introducir mas elementos. Ademas hay que especificarle qué tiene que mostrar mientras, el componente cargado mediante lazy, no haya cargado todavia. Esto se hace mediante su atributo fallback, que recibe el componente que se mostrara antes de la carga. be Jose CastellanoFuncionamiento Con la funci6n lazy se cargara un componente que no se necesitara en la carga inicial de nuestra aplicacién. Esto se hara mediante un import dinamico. La funcién pasada como parametro a lazy, se ejecutara cuando rendericemos nuestro componente Suspense. En ese momento se empezara a cargar el componente requerido y, cuando esté cargado, se renderizara. Mientras tanto, mediante el atributo fallback de Suspense, mostraremos otro componente o elemento, indicando que el recurso esta cargando. be Jose CastellanoConclusion Utiliza lazy loading para ciertas partes de tu aplicaci6n que no son necesarias en la carga inicial de esta. Mejorara su rendimiento y la experiencia de usuario. Lo que hara mas probable que el comportamiento de estos sea el deseado. Si quieres ver el ejemplo completo y probarlo, puedes visitarlo en la documentaci6n de React. be Jose CastellanoSi quieres saber mas trucos de React y de Programaci6én Web sigueme. Y sigueme también en mi canal de YouTube, donde te ensefo a usar estos trucos. El enlace en mi biografia. be Jose Castellano