🚀 Optimizing React Performance: How to use Lazy and Suspense

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-sus...
Repo: github.com/man...
👇 IMPORTANT:
Learn how to do your web portfolio with HTML and CSS:
www.udemy.com/...
Github: github.com/org...
---
#reactsuspense #reactjst #reactlazy

[@rodrigojulianmartin7092]

Muy buena explicacion, muchas gracias!

[@nicovelazquezz]

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]

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!

[@nahuelescalante1248]

Genio master idolo thanks

[@nic_jaws]

Muy bien explicado y al grano. Gracias

[@manuelsanchezweb]

Gracias, Nicolas! 💪

[@NyxAGO]

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]

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

[@thejoseph2709]

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.

[@megapanza6]

Buen aporte amigo, muy claro!

[@manuelsanchezweb]

Gracias a ti por el feedback!

[@jesusre8495]

Genial! gracias por la ayuda!

[@manuelsanchezweb]

De nada!

[@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]

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

[@079Francvs]

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.

[@MsSoldadoRaso]

Excelente

[@manuelsanchezweb]

🤙🤙💪💪

[@MichellQHernandez]

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]

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]

Super sencillo, recuerden que solo para React 18 y mayores

[@manuelsanchezweb]

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

[@francovedia5584]

funciona, gracias

[@ricardorien]

Amigo haga zoom in a ese codigo.

[@TheFranco887]

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

[@manuelsanchezweb]

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!

[@user-rd4oo1jg5g]

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]

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