Code Splitting in React JS - Lazy Loading Performance Optimization

แชร์
ฝัง
  • เผยแพร่เมื่อ 9 ก.ย. 2024

ความคิดเห็น • 93

  • @GarmrZero13
    @GarmrZero13 2 ปีที่แล้ว +7

    I've implemented lazy and suspense into some of my projects before, but i never head of the error boundary. Big thanks for explaining it!

    • @vp351
      @vp351 ปีที่แล้ว +1

      but what if we want to load the component after specific time for example 5 sec.. bcoz lazy loading does not provide that feature..

    • @keyjeyelpi
      @keyjeyelpi ปีที่แล้ว +1

      ​@@vp351well, it is still possible though. You could create a boolean that turns true after 5 seconds, which will in turn, load the lazy loaded component after 5 seconds.

  • @ashish_prajapati_tr
    @ashish_prajapati_tr 2 ปีที่แล้ว +8

    i am already using it for long time.
    it's amazing

    • @RoadsideCoder
      @RoadsideCoder  2 ปีที่แล้ว +2

      That's Great!

    • @fffooccc9801
      @fffooccc9801 2 ปีที่แล้ว

      @@RoadsideCoder BHAIYA APKA VS CODE KA LAYOUT SETTING ACHA HAI SHARE KR SAKTE HO KAISE APPLY KIYA?

    • @RoadsideCoder
      @RoadsideCoder  2 ปีที่แล้ว +1

      For theme, I use peacock extension

    • @fffooccc9801
      @fffooccc9801 2 ปีที่แล้ว

      @@RoadsideCoder and font?

    • @RoadsideCoder
      @RoadsideCoder  2 ปีที่แล้ว

      Default

  • @soumyadeepdawn481
    @soumyadeepdawn481 2 ปีที่แล้ว +1

    Hey. Seriously. Thank you. I just downloaded soft and I can CLEARLY see why your vid was recomnded. You're an aweso intro into

  • @Android-17
    @Android-17 ปีที่แล้ว +1

    Thank you for explaining the error boundary part.
    Excellent video!

  • @Lohitpant
    @Lohitpant 2 ปีที่แล้ว +7

    I was asked Code Splitting in an interview.

  • @ayushjain7023
    @ayushjain7023 2 ปีที่แล้ว +2

    Videos like these are really helpful and the way you have explained the things is really nice, you just gained a subscriber ❤️

  • @Dev-Phantom
    @Dev-Phantom ปีที่แล้ว +1

    very conceptual , maza aa gaya

  • @VishalKumar-mi6ed
    @VishalKumar-mi6ed 10 หลายเดือนก่อน

    The way you have explained the things is really nice, you just gained a new subscriber ❤

  • @adityaakhare3519
    @adityaakhare3519 2 ปีที่แล้ว

    thnx a lot for lazy loading and error boundary concept i am gonna implementing this to my project

  • @shaiksameer2776
    @shaiksameer2776 5 หลายเดือนก่อน

    aap purush nahi ho, punya purosh ho, excellent

  • @sohamgohel7000
    @sohamgohel7000 2 หลายเดือนก่อน +1

    15:00 both page are different before they check only loclhost:3000 after they check other page that why performance is not increase

  • @muzamillkhan9747
    @muzamillkhan9747 2 ปีที่แล้ว

    Thanks man keep posting these kind of videos..

  • @gideonmanasa3193
    @gideonmanasa3193 2 ปีที่แล้ว

    Great video thanks 🙌🏾🙌🏾🙌🏾

  • @mattoattacko
    @mattoattacko 2 ปีที่แล้ว

    Video was very helpful. Thanks mate

  • @ViewerGaunt
    @ViewerGaunt 2 ปีที่แล้ว +3

    I don't think you're testing the same endpoints for both lighthouse tests.
    / Vs / coins...

  • @TravelwithPujarini
    @TravelwithPujarini 2 ปีที่แล้ว +2

    Great video. 🔥

  • @anto_deejay
    @anto_deejay 2 ปีที่แล้ว

    nice tuto Thank you!

  • @A9kit.k
    @A9kit.k 2 ปีที่แล้ว

    Great brother 👏🏻👏🏻

  • @aniketshukla6095
    @aniketshukla6095 2 ปีที่แล้ว

    All the best,

  • @roopeshsingh3211
    @roopeshsingh3211 2 ปีที่แล้ว

    Amazing teaching

  • @rohanthakran4225
    @rohanthakran4225 ปีที่แล้ว +1

    Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.

  • @eminresulzade2444
    @eminresulzade2444 2 ปีที่แล้ว

    Thank u so much man great video.
    I had a question.Is it ok to add react lazy to all components?

  • @hemantvardani1436
    @hemantvardani1436 4 หลายเดือนก่อน

    Thanks

  • @mukurpuri4966
    @mukurpuri4966 2 ปีที่แล้ว

    Amazing !!

  • @sumitkumardey3268
    @sumitkumardey3268 3 หลายเดือนก่อน

    Great

  • @ahmadfaraz3678
    @ahmadfaraz3678 2 ปีที่แล้ว +1

    Helpful video

  • @HSBTechYT
    @HSBTechYT 2 ปีที่แล้ว +6

    Another reason to use next js instead of react js 🙏

  • @vp351
    @vp351 ปีที่แล้ว

    but what if we want to load the component after specific time for example 5 sec.. bcoz lazy loading does not provide that feature..

  • @viktorkasap
    @viktorkasap ปีที่แล้ว

    Cool, but what can we do if we need to keep the previous content before loading the next one? I mean, you click on a nav link, then a progress bar shows the loading process while the content is still on the page. After the next page content loads, the old content is replaced with the new content.

  • @pranupranav6279
    @pranupranav6279 2 ปีที่แล้ว +1

    Wow.

    • @pranupranav6279
      @pranupranav6279 2 ปีที่แล้ว

      This is optimization is next level optimization.

  • @chineduabalogu
    @chineduabalogu 2 ปีที่แล้ว

    Appreciate you for this video! more grease to your elbows

  • @thedullilama6767
    @thedullilama6767 2 ปีที่แล้ว

    You are awesome

  • @nestorcanales2341
    @nestorcanales2341 2 ปีที่แล้ว

    great video, but can you use it in a SSR using react, webpack, babel please

  • @arcadan
    @arcadan 2 ปีที่แล้ว

    I wonder why my routes is not getting splitted when i run build, it seems the same as not using lazy strategy, has someone faced the same as me? would someone tell me what could be the problem? (im using react 17, and its CRA)

  • @regilearn2138
    @regilearn2138 2 ปีที่แล้ว +1

    please do a MERN stack project with typescript

  • @saitejagatadi9711
    @saitejagatadi9711 6 หลายเดือนก่อน

    Bhai, then with webpack also we can do code splitting?

  • @Dev-Phantom
    @Dev-Phantom ปีที่แล้ว

    cool, very interesting

  • @v1xbetlive531
    @v1xbetlive531 ปีที่แล้ว

    i have watched your video and it is very helpful for me, i have cloned the code but banner.js and homepage is not importing and output is not displaying what should i do please help for my intership

  • @caricatureadda3867
    @caricatureadda3867 2 ปีที่แล้ว +1

    Nice tutorial, has react become seo friendly its showing 100% against SEO

  • @roxxman3484
    @roxxman3484 2 ปีที่แล้ว

    Bro how to safeguard our web servers like in MERN stack from Slow Loris attack or some other attacks like Ddos and something?

  • @technicalspot1848
    @technicalspot1848 2 ปีที่แล้ว

    Bhai issue. Yeh hai ki code spllitted compnets lod hi nahi hote toh kya kre

  • @ahmadfaraz3678
    @ahmadfaraz3678 2 ปีที่แล้ว

    Which will be the next topic?

  • @saikumargatla4706
    @saikumargatla4706 9 หลายเดือนก่อน

    Infinite scrolling pe bhi ekk video banao

  • @PIYUSH-lz1zq
    @PIYUSH-lz1zq 2 ปีที่แล้ว +1

    Bhaiya can you provide us MERN stack interview questions sheet 🖤

  • @preet3167
    @preet3167 2 ปีที่แล้ว

    But I have a problem

  • @hamzashaikh9164
    @hamzashaikh9164 2 ปีที่แล้ว

    Great videos 🤯🔥

  • @alexandrupruteanu6532
    @alexandrupruteanu6532 ปีที่แล้ว

    for me lazy,Suspense nat working.

  • @Codewithjs8
    @Codewithjs8 2 ปีที่แล้ว +1

    Sir please upload olx clone tutorial

    • @RoadsideCoder
      @RoadsideCoder  2 ปีที่แล้ว

      Added to the list

    • @Codewithjs8
      @Codewithjs8 2 ปีที่แล้ว

      Where was added it sir

    • @RoadsideCoder
      @RoadsideCoder  2 ปีที่แล้ว +1

      I mean my personal list of video ideas 😄

    • @Codewithjs8
      @Codewithjs8 2 ปีที่แล้ว

      Haaa haaa 🤣😂 I am waiting for your olx clone tutorial sir

  • @sanjeevchaurasia4819
    @sanjeevchaurasia4819 2 ปีที่แล้ว

    Can we lazy load a context? Like component

    • @RoadsideCoder
      @RoadsideCoder  2 ปีที่แล้ว

      Probably not

    • @emreozgun3846
      @emreozgun3846 2 ปีที่แล้ว

      @@RoadsideCoder what about lazy loading a nested route ? (like in react-router v6)

  • @emreozgun3846
    @emreozgun3846 2 ปีที่แล้ว

    I presume that the reason of the shitty performance is css-in-js ?

  • @shubhamdubey9577
    @shubhamdubey9577 2 ปีที่แล้ว

    Sir ye project complete ho gya kya mujhe mere clg me meajor project me dena hai

  • @niklausmikaelson7332
    @niklausmikaelson7332 2 ปีที่แล้ว

    Bhai Redux ka tutorial bana do easy jo samjh aa jay

    • @RoadsideCoder
      @RoadsideCoder  2 ปีที่แล้ว

      Already bana rakha h.

    • @niklausmikaelson7332
      @niklausmikaelson7332 2 ปีที่แล้ว

      @@RoadsideCoder kya lastest me mapstateprop and dispatch wala function use nhi hota hai mene codewith harry ka dekha tha usme nhi tha

    • @RoadsideCoder
      @RoadsideCoder  2 ปีที่แล้ว

      Yes ab hum mostly functional approach use krte hai, with useSelector and useDispatch hooks.
      But u can use old approach as well.

  • @streeetvlooger9744
    @streeetvlooger9744 2 ปีที่แล้ว

    sadly im with you a year later lol

  • @Saurabhkumar-ps5zp
    @Saurabhkumar-ps5zp ปีที่แล้ว

    Thanks

  • @ravi_verma31
    @ravi_verma31 ปีที่แล้ว

    great

  • @v1xbetlive531
    @v1xbetlive531 ปีที่แล้ว

    i have watched your video and it is very helpful for me, i have cloned the code but banner.js and homepage is not importing and output is not displaying what should i do please help for my intership

  • @mrrishiraj88
    @mrrishiraj88 2 ปีที่แล้ว

    Thanks