🚀 Optimizing React Performance: How to use Lazy and Suspense

Рет қаралды 8,219

Жыл бұрын

This tutorial covers the use of Lazy and Suspense in your React application and how it improves performance.
You will learn in less than 5 minutes to lazy-load components only if they are required and how to use Suspense to manage the asyncronous load of those components.
🔗 LINKS
Live: react-lazy-suspense.netlify.app/
Repo: github.com/manuelsanchezweb/r...
👇 IMPORTANT:
Learn how to do your web portfolio with HTML and CSS:
www.udemy.com/course/crea-tu-...
Github: github.com/orgs/manuelsanchez...
---
#reactsuspense #reactjst #reactlazy

Пікірлер: 27

@manuelsanchezweb Жыл бұрын

¿Conocías Lazy y Suspense de React? ¿Lo habías usado antes? ¡Cuéntamelo por aquí!

@carmendelcampomunoz4649 Жыл бұрын

Soy yo Tomi por otra cuenta

@erickruben5536 9 ай бұрын

La verdad que no, intentaba hacer otras cosas para hacer una pantalla de carga pero tu lo has hecho muy sencillo muchas gracias

@nic_jaws Жыл бұрын

Muy bien explicado y al grano. Gracias

@manuelsanchezweb Жыл бұрын

Gracias, Nicolas! 💪

@francovedia5584 8 ай бұрын

funciona, gracias

@nicovelazquezz 6 ай бұрын

Hola Manuel, caí en este video de casualidad. Para mi el lazy loading es algo nuevo y lo he entendido en 5 minutos gracias a tí. Te has ganado un nuevo subscriptor. Saludos desde ARG

@manuelsanchezweb 6 ай бұрын

Vamos! Buenísimo! Pues nada, estate atento por aquí que suelo sacar temas de React/Next que tienen que ver con mejoras de rendimiento! Un saludo desde Hamburgo!

@megapanza6 Жыл бұрын

Buen aporte amigo, muy claro!

@manuelsanchezweb Жыл бұрын

Gracias a ti por el feedback!

@jesusre8495 6 ай бұрын

Genial! gracias por la ayuda!

@manuelsanchezweb 6 ай бұрын

De nada!

@NyxAGO 5 ай бұрын

no encontre tu version de la pokedex, pero me di cuenta que usar Lazy y Suspense no espera a que termine de cargar las imagenes (solo los componentes) :(, me pregunto si habra una forma que termine de cargar el componente con imagenes y recien mostrar la pagina completa

@manuelsanchezweb 5 ай бұрын

Buenas! Suponía que eso debía funcionar ya así con React 18, le echaré un vistazo a ver! Gracias por tu comentario!

@ellocoralf1341 12 күн бұрын

Puedes usar el atributo de loading='lazy' para hacer que cargue la imagen solo cuando estén apunto de entrar en viewport. Te recomiendo que combines eso con lo que muestra el vídeo para más rendimiento.

@MsSoldadoRaso 7 ай бұрын

Excelente

@manuelsanchezweb 7 ай бұрын

🤙🤙💪💪

@ricardorien 6 ай бұрын

Amigo haga zoom in a ese codigo.

@user-rd4oo1jg5g 7 ай бұрын

Hola que tal? Muy buen video, consulta por lo que investigue se dice que las api rest son stateless esto es a nivel servidor o cliente? En el caso por ej de react que tb se habla de componentes con y sin estado es a nivel cliente o servidor? No me queda del todo claro. Graciass

@manuelsanchezweb 6 ай бұрын

Muy buenas, no entiendo muy bien la pregunta, de primeras te respondería cliente, pero no entiendo bien la pregunta. Tienes un link?

@TheFranco887 6 ай бұрын

Buenisimo! En caso de no usar outlet donde deberia ir el suspense?

@manuelsanchezweb 6 ай бұрын

El suspense lo puedes poner de wrapper de cualquier elemento al que quieras esperar. Cuando digo esperar, me refiero a que se cargue todo lo que haya dentro de ese elemento, fetching de datos incluido por ejemplo. Tienes mucha info al respecto aquí: react.dev/reference/react/Suspense. ¡Es una superbuena práctica que con React 18 se ha vuelto muy fácil y recomendable de utilizar!

@MichellQHernandez 5 ай бұрын

Funciona todo perfecto , pero si llamara mi componente supongamos comentarios, desde otro componente, y ahí ya no me carga el componente, tendría que poner suspense en ese componente también o como podría solucionar ese tema? Muchas gracias por tu ayuda

@manuelsanchezweb 5 ай бұрын

Buenas! He tardado un poco en contestar porque estaba pensando bien qué decir. Mi respuesta a priori es que depende. Imagino que tienes algo como ChildComponent (el que ya tiene Suspense) y el ParentComponent. Si es el único Child, debería ser suficiente con ponerlo en el Child. Esto sería Isolated Suspense. Si tienes varios children y todos o muchos tienen alguna movida asíncrona, sí te merece la pena hacer un Suspense en el ParentComponent. Y lo que tú sugieres, que es NestedSuspense, hacer Suspense en los dos, también es posible con React, y te permite un control mucho más detallado de cada uno de los estados. Total, que depende un poco del caso que tengas. Espero que haya sido más o menos de ayuda!

@LorenzoJimenez 7 ай бұрын

Super sencillo, recuerden que solo para React 18 y mayores

@manuelsanchezweb 7 ай бұрын

Exacto, PEGI 18, pronto se vienen algunas buenas prácticas con React que se añadieron con React 18!

@079Francvs 18 күн бұрын

Buen video, el único defecto es que me quedé esperando aquello que dijiste, de que hay manera de hacer que solo cargue el componente que se está usando, aun hayas cliqueado el resto.