How to Improve Performance in React with Code Splitting

Рет қаралды 202,284

Жыл бұрын

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

Пікірлер: 186

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

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

@eshw23 Жыл бұрын

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

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

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

@michaelantoni8323 Жыл бұрын

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

@antoniobasilio319 Жыл бұрын

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

@MasayaShida Жыл бұрын

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

@rahulkhatri8304 Жыл бұрын

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

@softwaredeveloper2897 Жыл бұрын

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

@greimilnunez5179 Жыл бұрын

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

@rahullingan2119 11 ай бұрын

Simple and straightforward explanation! excellent work👏

@anton9410 Жыл бұрын

Great information, thank you for posting this video.

@naveenau143 Жыл бұрын

this is just point to point explanation. Loved it

@ayushnigam9424 8 күн бұрын

That was amazing, thanks a bunch!!

@badytouray294 Жыл бұрын

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

@marvinfok65 2 ай бұрын

Simply & straightforward! Love the explanation!

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

@priscillasilva6510 Жыл бұрын

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

@pauloluguenda8397 2 ай бұрын

Great content bro, thank you !

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

@xesvitinho1231 Жыл бұрын

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

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

@RamonBalthazar Жыл бұрын

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

@neetugupta8036 5 ай бұрын

Thank you! Your video was quite useful

@baotruong5775 Жыл бұрын

Thank you from the bottom of my heart!

@diegopajuelo9060 Жыл бұрын

nice man, finally i got it. Thanks.

@Aakashiyana 10 ай бұрын

Very well explained in a practical manner

@enriccogemha858 Жыл бұрын

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

@ahmedazizabbassi 4 ай бұрын

Thanks! Great Job!

@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

@ThColinPereira Жыл бұрын

This is super helpful!

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

@danhloc112 Жыл бұрын

It's very useful, thank you so much

@jatilyadav4000 Жыл бұрын

Great Video bro... helps a lot.

@wylakers1250 Жыл бұрын

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

@jonathanorrego6199 Жыл бұрын

Gracias Pedro! nuevo skill desbloqueado!

@heitortessaro5612 Жыл бұрын

Great content, congrats

@Krazness Жыл бұрын

Great vid bro. Thanks

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

@aymenbachiri-yh2hd 4 күн бұрын

Thank you so much pedro

@davidsyengo1893 Жыл бұрын

Top notch as usual

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

Good information on optimisation of a react app.

@yusufkebbe2909 Жыл бұрын

Amazing explanation thanks man

@bofevitaminado Жыл бұрын

Brabo! Adoro esse canal

@jpcc1223 Жыл бұрын

Ótimo conteúdo, obrigado!

@GB-vz8pk 28 күн бұрын

amazing video!!!

@Abhisumant03 Жыл бұрын

New react course was damn good 😊😊

@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 ❤

@skaidans Жыл бұрын

Good video! Thank tou

@sillasbernardodev Жыл бұрын

Nice explanation

@andrewaghoghovwia1948 Жыл бұрын

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

@gabrielgherman87 Жыл бұрын

Excelente vídeo! Valeu!

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

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

@Saiintss7 Жыл бұрын

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

@EricOnYouTube Жыл бұрын

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

@rahulkulkarni9653 Жыл бұрын

This is amazing 🥰

@golf-and-surf Жыл бұрын

Why do i blink when i route between pages after adding lazy load?

@SeekerofUniverse33 Жыл бұрын

what theme are you using Pedro nice color combination

@shubhamdharpure8586 Жыл бұрын

Which theme you are using in this video

@jaganvichu 9 ай бұрын

Same problem on my project but I used redux thunk and api calling whenever other pages openings.. so api taking some time for the response.

@Untouchable5461 Жыл бұрын

whats your theme font for vscode?

@maxplank1780 Жыл бұрын

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

@bekiteshome4670 11 ай бұрын

As always brother didn't let us down!

@MrSundaayy Жыл бұрын

Thank you bro!

@eliyahutarab4862 Жыл бұрын

Nice thank you for that this is great

@aldotube88 Жыл бұрын

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

@ayushyt918 Жыл бұрын

Thanks Pedro

@ronaldomaia 10 күн бұрын

Pedro, seu ingles esta bem fluente! E o seu conteudo e bem apresentado! Parabens!

@eduardohernandezsoto785 Жыл бұрын

I have problem with tailwind css, it's not show css implemented when use lazy

@tharindumandusanka7708 Жыл бұрын

Thanks Man ❤❤❤❤

@douglasbernardodev Жыл бұрын

Very usefull man... thanks for share!

@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

@sohrb 4 ай бұрын

can you lazy load components from an index file?

@raselhossain8855 Жыл бұрын

Can we import npm package with react lazy loading?

@russellbanares5324 Жыл бұрын

Does this affect the app when deploying it?

@saadowain3511 Жыл бұрын

Amazing .

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

@dimitmoto1716 Жыл бұрын

Thanks a lot!

@benlamar18 Жыл бұрын

Thanks alot

@calltoreason Жыл бұрын

How do you deal with paths that you request form the server and you display the path component in a react bundle? NOT ON A DEV SERVER!! YOU BUILD THE PROJECT AND SERVE IT USING EXPRESS OR WHATEVER. How do you manage that?

@podpison3268 Жыл бұрын

Good point

@dandantin Жыл бұрын

Excellent Video. Pedro, where are you from?

@Lichkuroro Жыл бұрын

will this work on next js?

@lilizok4 Жыл бұрын

awesome video !!

@PedroTechnologies Жыл бұрын

Obrigado!!

@wpxpert98 Жыл бұрын

Thank you

@fadyfathey4315 3 ай бұрын

THNX BRO

@sagarkudu3123 Жыл бұрын

Great ❤️❤️❤️

@arifhussain5276 Жыл бұрын

Awesome video

@nabinsaud4688 Жыл бұрын

I saw React router documentation v6.4 there is not available old style of doing

@salamikhalil9716 Жыл бұрын

Great content 👌

@PedroTechnologies Жыл бұрын

Glad you liked it

@PurexXD Жыл бұрын

Peidro tech sensei. Saludos desde Perú.

@bhumit070 Жыл бұрын

so it does not work with named exports ?

@chinnaraghs4000 9 ай бұрын

Hi Bro good explanation

@rahulkulkarni9653 Жыл бұрын

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

@priyabansal9911 Жыл бұрын

Please make a playlist -> how to improve

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