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

  • @arn4v_
    @arn4v_ Жыл бұрын

    You don't have to export default for dynamic import() to work. You can instead do import('./CreatePort').then(module => module.CreatePost)

  • @IdandushHen

    @IdandushHen

    Жыл бұрын

    you actually have to return object with default import('./CreatePort').then(module => ({default: module.CreatePost})) - like this

  • @KevinArellano

    @KevinArellano

    Жыл бұрын

    @@IdandushHen you don't have to import/export anything, just have 1 file with 1 line of code and boom!

  • @davidchavarriamendez9091

    @davidchavarriamendez9091

    Жыл бұрын

    @@KevinArellano So what's the correct method?

  • @KevinArellano

    @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

    @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
    @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
    @CarolinaNT Жыл бұрын

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

  • @eshw23
    @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
    @henrynovoalondono2885 Жыл бұрын

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

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

  • @antoniobasilio319
    @antoniobasilio319 Жыл бұрын

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

  • @cutieshakira
    @cutieshakira Жыл бұрын

    I didn't know about this concept, thanks for this! also your editing has gotten super clean!

  • @PedroTechnologies

    @PedroTechnologies

    Жыл бұрын

    Happy u liked it! Im re-investing into quality :)

  • @michaelantoni8323
    @michaelantoni8323 Жыл бұрын

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

  • @naveenau143
    @naveenau143 Жыл бұрын

    this is just point to point explanation. Loved it

  • @rahullingan2119
    @rahullingan211911 ай бұрын

    Simple and straightforward explanation! excellent work👏

  • @MasayaShida
    @MasayaShida Жыл бұрын

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

  • @ramananr3529
    @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

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

  • @marvinfok65
    @marvinfok65Ай бұрын

    Simply & straightforward! Love the explanation!

  • @greimilnunez5179
    @greimilnunez5179 Жыл бұрын

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

  • @softwaredeveloper2897
    @softwaredeveloper2897 Жыл бұрын

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

  • @anton9410
    @anton9410 Жыл бұрын

    Great information, thank you for posting this video.

  • @priscillasilva6510
    @priscillasilva6510 Жыл бұрын

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

  • @badytouray294
    @badytouray294 Жыл бұрын

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

  • @Aakashiyana
    @Aakashiyana9 ай бұрын

    Very well explained in a practical manner

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

  • @pauloluguenda8397
    @pauloluguenda8397Ай бұрын

    Great content bro, thank you !

  • @baotruong5775
    @baotruong5775 Жыл бұрын

    Thank you from the bottom of my heart!

  • @enriccogemha858
    @enriccogemha858 Жыл бұрын

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

  • @ThColinPereira
    @ThColinPereira Жыл бұрын

    This is super helpful!

  • @diegopajuelo9060
    @diegopajuelo9060 Жыл бұрын

    nice man, finally i got it. Thanks.

  • @neetugupta8036
    @neetugupta80364 ай бұрын

    Thank you! Your video was quite useful

  • @rahulkhatri8304
    @rahulkhatri8304 Жыл бұрын

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

  • @xesvitinho1231
    @xesvitinho1231 Жыл бұрын

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

  • @jonathanorrego6199
    @jonathanorrego6199 Жыл бұрын

    Gracias Pedro! nuevo skill desbloqueado!

  • @ahmedazizabbassi
    @ahmedazizabbassi3 ай бұрын

    Thanks! Great Job!

  • @jatilyadav4000
    @jatilyadav4000 Жыл бұрын

    Great Video bro... helps a lot.

  • @RamonBalthazar
    @RamonBalthazar Жыл бұрын

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

  • @yusufkebbe2909
    @yusufkebbe2909 Жыл бұрын

    Amazing explanation thanks man

  • @Krazness
    @Krazness Жыл бұрын

    Great vid bro. Thanks

  • @danhloc112
    @danhloc112 Жыл бұрын

    It's very useful, thank you so much

  • @heitortessaro5612
    @heitortessaro5612 Жыл бұрын

    Great content, congrats

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

    Good information on optimisation of a react app.

  • @davidsyengo1893
    @davidsyengo1893 Жыл бұрын

    Top notch as usual

  • @sillasbernardodev
    @sillasbernardodev Жыл бұрын

    Nice explanation

  • @bofevitaminado
    @bofevitaminado Жыл бұрын

    Brabo! Adoro esse canal

  • @jpcc1223
    @jpcc1223 Жыл бұрын

    Ótimo conteúdo, obrigado!

  • @ayushyt918
    @ayushyt918 Жыл бұрын

    Thanks Pedro

  • @andriipereverziev6287
    @andriipereverziev6287 Жыл бұрын

    Good video! Thank tou

  • @MrSundaayy
    @MrSundaayy Жыл бұрын

    Thank you bro!

  • @Abhisumant03
    @Abhisumant03 Жыл бұрын

    New react course was damn good 😊😊

  • @gabrielgherman87
    @gabrielgherman87 Жыл бұрын

    Excelente vídeo! Valeu!

  • @GB-vz8pk
    @GB-vz8pk9 күн бұрын

    amazing video!!!

  • @rahulkulkarni9653
    @rahulkulkarni9653 Жыл бұрын

    This is amazing 🥰

  • @podpison3268
    @podpison3268 Жыл бұрын

    Good point

  • @tharindumandusanka7708
    @tharindumandusanka7708 Жыл бұрын

    Thanks Man ❤❤❤❤

  • @wpxpert98
    @wpxpert98 Жыл бұрын

    Thank you

  • @dimitmoto1716
    @dimitmoto1716 Жыл бұрын

    Thanks a lot!

  • @bekiteshome4670
    @bekiteshome467010 ай бұрын

    As always brother didn't let us down!

  • @benlamar18
    @benlamar18 Жыл бұрын

    Thanks alot

  • @PurexXD
    @PurexXD Жыл бұрын

    Peidro tech sensei. Saludos desde Perú.

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

  • @eliyahutarab4862
    @eliyahutarab4862 Жыл бұрын

    Nice thank you for that this is great

  • @saadowain3511
    @saadowain3511 Жыл бұрын

    Amazing .

  • @fadyfathey4315
    @fadyfathey43152 ай бұрын

    THNX BRO

  • @chinnaraghs4000
    @chinnaraghs40009 ай бұрын

    Hi Bro good explanation

  • @lilizok4
    @lilizok4 Жыл бұрын

    awesome video !!

  • @PedroTechnologies

    @PedroTechnologies

    Жыл бұрын

    Obrigado!!

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

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

  • @salamikhalil9716
    @salamikhalil9716 Жыл бұрын

    Great content 👌

  • @PedroTechnologies

    @PedroTechnologies

    Жыл бұрын

    Glad you liked it

  • @douglasbernardodev
    @douglasbernardodev Жыл бұрын

    Very usefull man... thanks for share!

  • @andrewaghoghovwia1948
    @andrewaghoghovwia1948 Жыл бұрын

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

  • @arifhussain5276
    @arifhussain5276 Жыл бұрын

    Awesome video

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

  • @yadneshkhode3091
    @yadneshkhode3091 Жыл бұрын

    Thanks

  • @aldotube88
    @aldotube88 Жыл бұрын

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

  • @dandantin
    @dandantin Жыл бұрын

    Excellent Video. Pedro, where are you from?

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

  • @sagarkudu3123
    @sagarkudu3123 Жыл бұрын

    Great ❤️❤️❤️

  • @rahulkulkarni9653
    @rahulkulkarni9653 Жыл бұрын

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

  • @priyabansal9911
    @priyabansal9911 Жыл бұрын

    Please make a playlist -> how to improve

  • @masj7786
    @masj7786 Жыл бұрын

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

  • @tadzyla
    @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

  • @maxplank1780
    @maxplank1780 Жыл бұрын

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

  • @wylakers1250
    @wylakers1250 Жыл бұрын

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

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

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

  • @xxvsvitorxx
    @xxvsvitorxx Жыл бұрын

    Ótimo video! Poderia fazer um vídeo falando sobre o novo use hook e como isso impactará no React query?

  • @PedroTechnologies

    @PedroTechnologies

    Жыл бұрын

    Vou fazer!

  • @cristhiancunha

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

  • @codesymphony
    @codesymphony Жыл бұрын

    nice

  • @RonnieryBorges
    @RonnieryBorges Жыл бұрын

    Mano seu Inglês está brabo congratz.

  • @SeekerofUniverse33
    @SeekerofUniverse33 Жыл бұрын

    what theme are you using Pedro nice color combination

  • @oneofone_1333
    @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

  • @mahammadmansurali7442
    @mahammadmansurali7442 Жыл бұрын

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

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

  • @Just__Ilya
    @Just__Ilya Жыл бұрын

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

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

    You can also code split packages using react loadable.

  • @mohamedyoussef8835
    @mohamedyoussef8835 Жыл бұрын

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

  • @shubhamdharpure8586
    @shubhamdharpure858611 ай бұрын

    Which theme you are using in this video

  • @workwithwegs4541
    @workwithwegs4541 Жыл бұрын

    🔥🔥🔥🔥🔥

  • @chesterxp508
    @chesterxp508 Жыл бұрын

    GoodJob!

  • @kam4282
    @kam4282 Жыл бұрын

    Nice explanation 👍

  • @Thanveershah
    @Thanveershah Жыл бұрын

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

  • @PedroTechnologies

    @PedroTechnologies

    Жыл бұрын

    Thank you

  • @EricOnYouTube
    @EricOnYouTube Жыл бұрын

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

  • @russellbanares5324
    @russellbanares5324 Жыл бұрын

    Does this affect the app when deploying it?

  • @binyamgetachew1656
    @binyamgetachew1656 Жыл бұрын

    This is very good, thank you can you do a video on redux saga please

  • @ElektrykFlaaj

    @ElektrykFlaaj

    Жыл бұрын

    Don't use redux pls

  • @ElektrykFlaaj

    @ElektrykFlaaj

    Жыл бұрын

    You have react query, zustand and jotai if you need "state management"

  • @Untouchable5461
    @Untouchable5461 Жыл бұрын

    whats your theme font for vscode?

Келесі