How to Improve Performance in React with Code Splitting

Рет қаралды 199,796

Жыл бұрын

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

Пікірлер: 184

@arn4v_ Жыл бұрын

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

@torstenmirow Жыл бұрын

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.

@eshw23 Жыл бұрын

Yo Pedro amazing video as usual. Good to see your still helping us learn to code while your a software engineer at Twitch!

@CarolinaNT Жыл бұрын

how i leaned so much in a 10 minutes video is out of this world. Thanks Pedro, you're awesome

@shinobi_coder88 Жыл бұрын

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!!

@henrynovoalondono2885 Жыл бұрын

Absolutely love these small 10 minute videos. To the point, and learned a whole lot. Thanks

@cutieshakira Жыл бұрын

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 :)

@antoniobasilio319 Жыл бұрын

você é incrível! Merece todo o sucesso do mundo!

@michaelantoni8323 Жыл бұрын

Great performance optimizations, hope you do this kind of videos more.

@ramananr3529 Жыл бұрын

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.

@rahullingan2119 10 ай бұрын

Simple and straightforward explanation! excellent work👏

@softwaredeveloper2897 Жыл бұрын

I have always wondered how to implement this🤩. Always learning new things from you.

@anton9410 Жыл бұрын

Great information, thank you for posting this video.

@naveenau143 Жыл бұрын

this is just point to point explanation. Loved it

@greimilnunez5179 Жыл бұрын

Dude your content is amazing, the way that u explain things is really interesting.

@MasayaShida Жыл бұрын

I have a mediun sized frontend project and this really helps. Thank you

@badytouray294 Жыл бұрын

Love this video man :-) well done with the simple explanation

@priscillasilva6510 Жыл бұрын

Thank you so much for this video☺You explained it so well

@xesvitinho1231 Жыл бұрын

Muito daora mano, manda muito na programação e no ingles tb!!1 brabo

@marvinfok65 Ай бұрын

Simply & straightforward! Love the explanation!

@pauloluguenda8397 Ай бұрын

Great content bro, thank you !

@enriccogemha858 Жыл бұрын

Great vid! I recognized the Brazilian accent as the it started playing 😆 Keep up the good work!

@RamonBalthazar Жыл бұрын

Parabéns mano, muito bom o vídeo 👏

@devmaheremad7360 Жыл бұрын

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!!!!!

@Aakashiyana 9 ай бұрын

Very well explained in a practical manner

@diegopajuelo9060 Жыл бұрын

nice man, finally i got it. Thanks.

@jatilyadav4000 Жыл бұрын

Great Video bro... helps a lot.

@neetugupta8036 4 ай бұрын

Thank you! Your video was quite useful

@baotruong5775 Жыл бұрын

Thank you from the bottom of my heart!

@ahmedazizabbassi 3 ай бұрын

Thanks! Great Job!

@ThColinPereira Жыл бұрын

This is super helpful!

@danhloc112 Жыл бұрын

It's very useful, thank you so much

@rahulkhatri8304 Жыл бұрын

This is definitely increase your website performance. I used next/dynamic to import components.

@yusufkebbe2909 Жыл бұрын

Amazing explanation thanks man

@jonathanorrego6199 Жыл бұрын

Gracias Pedro! nuevo skill desbloqueado!

@Krazness Жыл бұрын

Great vid bro. Thanks

@jpcc1223 Жыл бұрын

Ótimo conteúdo, obrigado!

@ZubairKhan-mb6rd Жыл бұрын

Good information on optimisation of a react app.

@heitortessaro5612 Жыл бұрын

Great content, congrats

@sillasbernardodev Жыл бұрын

Nice explanation

@Abhisumant03 Жыл бұрын

New react course was damn good 😊😊

@MrSundaayy Жыл бұрын

Thank you bro!

@andriipereverziev6287 Жыл бұрын

Good video! Thank tou

@bofevitaminado Жыл бұрын

Brabo! Adoro esse canal

@brilliantatosam6882 Жыл бұрын

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.

@ayushyt918 Жыл бұрын

Thanks Pedro

@gabrielgherman87 Жыл бұрын

Excelente vídeo! Valeu!

@dimitmoto1716 Жыл бұрын

Thanks a lot!

@davidsyengo1893 Жыл бұрын

Top notch as usual

@Vedant-M Жыл бұрын

Watching Pedro's videos never disappoints. Keep it up 👍🏼👍🏼

@bekiteshome4670 10 ай бұрын

As always brother didn't let us down!

@podpison3268 Жыл бұрын

Good point

@benlamar18 Жыл бұрын

Thanks alot

@wpxpert98 Жыл бұрын

Thank you

@eliyahutarab4862 Жыл бұрын

Nice thank you for that this is great

@fadyfathey4315 2 ай бұрын

THNX BRO

@chinnaraghs4000 8 ай бұрын

Hi Bro good explanation

@tharindumandusanka7708 Жыл бұрын

Thanks Man ❤❤❤❤

@wylakers1250 Жыл бұрын

thanks for the vid. I was wondering what theme do you use? Thanks

@lilizok4 Жыл бұрын

awesome video !!

@PedroTechnologies Жыл бұрын

Obrigado!!

@PurexXD Жыл бұрын

Peidro tech sensei. Saludos desde Perú.

@dandantin Жыл бұрын

Excellent Video. Pedro, where are you from?

@rahulkulkarni9653 Жыл бұрын

This is amazing 🥰

@tadzyla Жыл бұрын

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

@andrewaghoghovwia1948 Жыл бұрын

Hi Pedro..thanks for the invaluable resource. Please can you do a video on design patterns with examples. Thanks

@jesielpalacios Жыл бұрын

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 ❤

@TheMrtastee Жыл бұрын

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?.

@saadowain3511 Жыл бұрын

Amazing .

@masj7786 Жыл бұрын

I think I've learned from you in a couple of hours more than all these pointless Udemy 40+ hour courses

@tan2cang93 Жыл бұрын

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.

@aldotube88 Жыл бұрын

Nice video, would have been good if you had the code linked in the description also though

@salamikhalil9716 Жыл бұрын

Great content 👌

@PedroTechnologies Жыл бұрын

Glad you liked it

@arifhussain5276 Жыл бұрын

Awesome video

@SeekerofUniverse33 Жыл бұрын

what theme are you using Pedro nice color combination

@yadneshkhode3091 Жыл бұрын

Thanks

@rahulkulkarni9653 Жыл бұрын

Please make more videos on how to improve the performance of react application

@maxplank1780 Жыл бұрын

What is the end value of performance you won? Have you calculated it? Or it's just fine thoughts that you read somewhere?

@jesielpalacios Жыл бұрын

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 :)

@oneofone_1333 Жыл бұрын

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

@priyabansal9911 Жыл бұрын

Please make a playlist -> how to improve

@Thanveershah Жыл бұрын

Jeez the quality ✔✔, What mic do you use?

@PedroTechnologies Жыл бұрын

Thank you

@douglasbernardodev Жыл бұрын

Very usefull man... thanks for share!

@XeonAlpha Жыл бұрын

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.

@sagarkudu3123 Жыл бұрын

Great ❤️❤️❤️

@xxvsvitorxx Жыл бұрын

Ó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.

@stressed-ashen-cat Жыл бұрын

You can also code split packages using react loadable.

@shubhamdharpure8586 11 ай бұрын

Which theme you are using in this video

@RonnieryBorges Жыл бұрын

Mano seu Inglês está brabo congratz.

@mahammadmansurali7442 Жыл бұрын

Can you also make a video on , how to improve performance in Nextjs..please

@Just__Ilya Жыл бұрын

Привет друг, спасибо за видео

@codesymphony Жыл бұрын

nice

@EricOnYouTube Жыл бұрын

Pedro, do you have a tutorial on how to auth with Google and then register with an express API app? Thanks.

@kam4282 Жыл бұрын

Nice explanation 👍

@Saiintss7 Жыл бұрын

Is suspense a ready to use and stable functionnality with react ? Because it has been introduced an experimental one for years now

@Untouchable5461 Жыл бұрын

whats your theme font for vscode?

@mohamedyoussef8835 Жыл бұрын

Awesome video ++++++++++++++ 🙂

@russellbanares5324 Жыл бұрын

Does this affect the app when deploying it?

@Lichkuroro Жыл бұрын

will this work on next js?

@sohrb 3 ай бұрын

can you lazy load components from an index file?

@binyamgetachew1656 Жыл бұрын

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"