How to Improve Performance in React with Code Splitting
Ғылым және технология
Hey everyone, in this video I will be going over the concept of code splitting and lazy loading your code in react.
Join our Discord: / discord
🚀 Learn ReactJS By Building 6 Projects: codedamn.com/learn/reactjs-pr...
🐙 GraphQL Course: codedamn.com/learn/graphql-fo...
► Buy Crypto on Coinbase: coinbase-consumer.sjv.io/PedroTech
Social
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
Website: machadopedro.com
Linkedin: / machadop1407
Instagram: / _pedro.machado_
Github: github.com/machadop1407
Business Email: pedro@pedrotech.co
Tags:
- ReactJS Tutorial
- ReactJS and MySQL
- NodeJS Tutorial
- API Tutorial
#reactjs #codesplitting
Пікірлер: 185
You don't have to export default for dynamic import() to work. You can instead do import('./CreatePort').then(module => module.CreatePost)
@IdandushHen
Жыл бұрын
you actually have to return object with default import('./CreatePort').then(module => ({default: module.CreatePost})) - like this
@KevinArellano
Жыл бұрын
@@IdandushHen you don't have to import/export anything, just have 1 file with 1 line of code and boom!
@davidchavarriamendez9091
Жыл бұрын
@@KevinArellano So what's the correct method?
@KevinArellano
Жыл бұрын
@@davidchavarriamendez9091 The correct method is up to your case and your boss's case. Can't really choose a "correct" methods when you can do it any way and it works. Now the correct way in my opinion is functionless/serverless architect. Anywhere where microservices can come in and pick up the slack. I absolutely hate when there's a module that either does everything or doesn't do anything at all. Also monoliths are a big no no.
@leandrogtabak
Жыл бұрын
@@jameswatadza8962 I don't even know why these people see videos that seem to be so below their level. They just come here to show themselves
Actually it's easy possible to use named exports instead of default exports. Import function is simply an promise. lazy(()=> import('component/login').then(comp => comp.login)) So no need to change the way you export functions.
how i leaned so much in a 10 minutes video is out of this world. Thanks Pedro, you're awesome
Yo Pedro amazing video as usual. Good to see your still helping us learn to code while your a software engineer at Twitch!
Absolutely love these small 10 minute videos. To the point, and learned a whole lot. Thanks
Hope you stay healthy as always and keep making these micro-learning videos, it literally helps us to cultivate out mindset of "An Expert is a Beginner who stays actively curious and never quits". I like the way you do like, instead of making one long hours big project tutorial, you instead guide us to the basic concepts based on most demanded frontend trends like Performance Optimization and React Hook Form the simplified way. Bravo!!
você é incrível! Merece todo o sucesso do mundo!
I didn't know about this concept, thanks for this! also your editing has gotten super clean!
@PedroTechnologies
Жыл бұрын
Happy u liked it! Im re-investing into quality :)
Great performance optimizations, hope you do this kind of videos more.
this is just point to point explanation. Loved it
Simple and straightforward explanation! excellent work👏
I have a mediun sized frontend project and this really helps. Thank you
Hey Thanks Man!!! Currently I am working on a project where performance is crucial. I am glad I came across this video and applied it on my project. Really helpful content, Have a great day.
@tunacant9106
Жыл бұрын
What is the result like?! I'm so curious, how much performance increase do you see? I'm really new to optimising and making it more faster.
Simply & straightforward! Love the explanation!
Dude your content is amazing, the way that u explain things is really interesting.
I have always wondered how to implement this🤩. Always learning new things from you.
Great information, thank you for posting this video.
Thank you so much for this video☺You explained it so well
Love this video man :-) well done with the simple explanation
Very well explained in a practical manner
Ohh, Pedro thanks for sharing this with us thank you so much I love that features, please we need a playlist from things like this, thank you again!!!!!
Great content bro, thank you !
Thank you from the bottom of my heart!
Great vid! I recognized the Brazilian accent as the it started playing 😆 Keep up the good work!
This is super helpful!
nice man, finally i got it. Thanks.
Thank you! Your video was quite useful
This is definitely increase your website performance. I used next/dynamic to import components.
Muito daora mano, manda muito na programação e no ingles tb!!1 brabo
Gracias Pedro! nuevo skill desbloqueado!
Thanks! Great Job!
Great Video bro... helps a lot.
Parabéns mano, muito bom o vídeo 👏
Amazing explanation thanks man
Great vid bro. Thanks
It's very useful, thank you so much
Great content, congrats
Good information on optimisation of a react app.
Top notch as usual
Nice explanation
Brabo! Adoro esse canal
Ótimo conteúdo, obrigado!
Thanks Pedro
Good video! Thank tou
Thank you bro!
New react course was damn good 😊😊
Excelente vídeo! Valeu!
amazing video!!!
This is amazing 🥰
Good point
Thanks Man ❤❤❤❤
Thank you
Thanks a lot!
As always brother didn't let us down!
Thanks alot
Peidro tech sensei. Saludos desde Perú.
Hey man, I watched this video earlier and loved the concept of lazy loading. I am currently implementing it into my current project and am here to ask if lazy loading caches loaded components. Thanks, man.
Nice thank you for that this is great
Amazing .
THNX BRO
Hi Bro good explanation
awesome video !!
@PedroTechnologies
Жыл бұрын
Obrigado!!
Watching Pedro's videos never disappoints. Keep it up 👍🏼👍🏼
Great content 👌
@PedroTechnologies
Жыл бұрын
Glad you liked it
Very usefull man... thanks for share!
Hi Pedro..thanks for the invaluable resource. Please can you do a video on design patterns with examples. Thanks
Awesome video
I'd be great a React crud implementation with Redux and hooks, it's without classes, using containers, slices as well for explain as other ways or cases to use, idk, a tutorial of it without pain ❤
Thanks
Nice video, would have been good if you had the code linked in the description also though
Excellent Video. Pedro, where are you from?
many thanks for your sharing. I have applied react lazy in my project. Howerver, there are so many named export components in project (~ 40-50 files), so I can not go into each Component to change export to export default. Fortunately, I found a package lazily on npm, it works the same as React lazy but will convert named export to default export.
Great ❤️❤️❤️
Please make more videos on how to improve the performance of react application
Please make a playlist -> how to improve
I think I've learned from you in a couple of hours more than all these pointless Udemy 40+ hour courses
Hi Pedro, thank you for sharing tips. I just want to clarify if this can be achieved as well with ? Which is rendering exact route
What is the end value of performance you won? Have you calculated it? Or it's just fine thoughts that you read somewhere?
thanks for the vid. I was wondering what theme do you use? Thanks
great video!, is there a way to start loading in the background a lazy component after our normal component renders but before we actually requires the lazy ones?.
6:35 Actually React Suspense has been used with the same regularity throughout all versions of it's for as long as the hook exists, but it's ok :)
Ótimo video! Poderia fazer um vídeo falando sobre o novo use hook e como isso impactará no React query?
@PedroTechnologies
Жыл бұрын
Vou fazer!
@cristhiancunha
Жыл бұрын
@@PedroTechnologies só vim perceber que era br quando vi os comentários, ótima dicção e ótimo conteúdo, me lembrou bastante a forma como o conteúdo é gerenciado (talvez por debaixo dos panos não tenha nada a ver) pelas páginas agora no Nextjs 13.
nice
Mano seu Inglês está brabo congratz.
what theme are you using Pedro nice color combination
Yo Pedro love your content always, huge inspiration. Quick question, is it normal that am having more fun and actually building stuff in react js and not vanilla js? As soon as i learned the basic in vanilla js, i moved on to react and no am a bit worried that i didnt spend enough time in learning everthing in JS and building projects. Hope it makes what i just wrote😂. Greetings from Switzerland
Can you also make a video on , how to improve performance in Nextjs..please
Probably a really stupid question but could you use this same idea to dynamically import a CSS theme to allow a user to select they’re own personalized theme.
Привет друг, спасибо за видео
You can also code split packages using react loadable.
Awesome video ++++++++++++++ 🙂
Which theme you are using in this video
🔥🔥🔥🔥🔥
GoodJob!
Nice explanation 👍
Jeez the quality ✔✔, What mic do you use?
@PedroTechnologies
Жыл бұрын
Thank you
Pedro, do you have a tutorial on how to auth with Google and then register with an express API app? Thanks.
Does this affect the app when deploying it?
This is very good, thank you can you do a video on redux saga please
@ElektrykFlaaj
Жыл бұрын
Don't use redux pls
@ElektrykFlaaj
Жыл бұрын
You have react query, zustand and jotai if you need "state management"
whats your theme font for vscode?