Code Splitting in React JS - Lazy Loading Performance Optimization

Поділитися
Вставка
  • Опубліковано 22 лис 2024

КОМЕНТАРІ • 94

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

  • @Android-17
    @Android-17 Рік тому +1

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

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

  • @VishalKumar-mi6ed
    @VishalKumar-mi6ed Рік тому

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

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

  • @Lohitpant
    @Lohitpant 2 роки тому +7

    I was asked Code Splitting in an interview.

  • @Dev-Phantom
    @Dev-Phantom 2 роки тому +1

    very conceptual , maza aa gaya

  • @adityaakhare3519
    @adityaakhare3519 2 роки тому

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

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

  • @shaiksameer2776
    @shaiksameer2776 8 місяців тому

    aap purush nahi ho, punya purosh ho, excellent

  • @sohamgohel7000
    @sohamgohel7000 5 місяців тому +1

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

  • @ViewerGaunt
    @ViewerGaunt 2 роки тому +3

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

  • @muzamillkhan9747
    @muzamillkhan9747 2 роки тому

    Thanks man keep posting these kind of videos..

  • @TravelwithPujarini
    @TravelwithPujarini 2 роки тому +2

    Great video. 🔥

  • @gideonmanasa3193
    @gideonmanasa3193 2 роки тому

    Great video thanks 🙌🏾🙌🏾🙌🏾

  • @vaibhavjaiswal1309
    @vaibhavjaiswal1309 Місяць тому

    this is fine but while putting this things in deployment we are getting chunk load error how to resolve that

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

  • @mattoattacko
    @mattoattacko 2 роки тому

    Video was very helpful. Thanks mate

  • @saitejagatadi9711
    @saitejagatadi9711 8 місяців тому

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

  • @A9kit.k
    @A9kit.k 2 роки тому

    Great brother 👏🏻👏🏻

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

  • @aniketshukla6095
    @aniketshukla6095 2 роки тому

    All the best,

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

  • @anto_deejay
    @anto_deejay 2 роки тому

    nice tuto Thank you!

  • @rafahadenkar
    @rafahadenkar 2 роки тому

    Amazing !!

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

  • @eminresulzade2444
    @eminresulzade2444 2 роки тому

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

  • @technicalspot1848
    @technicalspot1848 2 роки тому

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

  • @roopeshsingh3211
    @roopeshsingh3211 2 роки тому

    Amazing teaching

  • @HSBTechYT
    @HSBTechYT 2 роки тому +6

    Another reason to use next js instead of react js 🙏

  • @regilearn2138
    @regilearn2138 2 роки тому +1

    please do a MERN stack project with typescript

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

  • @saikumargatla4706
    @saikumargatla4706 11 місяців тому

    Infinite scrolling pe bhi ekk video banao

  • @ahmadfaraz3678
    @ahmadfaraz3678 2 роки тому +1

    Helpful video

  • @pranupranav6279
    @pranupranav6279 2 роки тому +1

    Wow.

    • @pranupranav6279
      @pranupranav6279 2 роки тому

      This is optimization is next level optimization.

  • @nestorcanales2341
    @nestorcanales2341 2 роки тому

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

  • @caricatureadda3867
    @caricatureadda3867 2 роки тому +1

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

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

  • @ravi_verma31
    @ravi_verma31 Рік тому

    great

  • @shubhamdubey9577
    @shubhamdubey9577 2 роки тому

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

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

  • @PIYUSH-lz1zq
    @PIYUSH-lz1zq 2 роки тому +1

    Bhaiya can you provide us MERN stack interview questions sheet 🖤

  • @ahmadfaraz3678
    @ahmadfaraz3678 2 роки тому

    Which will be the next topic?

  • @mrrishiraj88
    @mrrishiraj88 2 роки тому

    Thanks

  • @thedullilama6767
    @thedullilama6767 2 роки тому

    You are awesome

  • @preet3167
    @preet3167 2 роки тому

    But I have a problem

  • @alexandrupruteanu6532
    @alexandrupruteanu6532 2 роки тому

    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

  • @chineduabalogu
    @chineduabalogu 2 роки тому

    Appreciate you for this video! more grease to your elbows

  • @hamzashaikh9164
    @hamzashaikh9164 2 роки тому

    Great videos 🤯🔥

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

  • @emreozgun3846
    @emreozgun3846 2 роки тому

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

  • @streeetvlooger9744
    @streeetvlooger9744 2 роки тому

    sadly im with you a year later lol

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

  • @Saurabhkumar-ps5zp
    @Saurabhkumar-ps5zp Рік тому

    Thanks

  • @sumitkumardey3268
    @sumitkumardey3268 6 місяців тому

    Great

  • @hemantvardani1436
    @hemantvardani1436 7 місяців тому

    Thanks