React Suspense Loading - Lazy Loading in React

in this video you will learn about lazy loading of components inside react just by using react lazy and suspense and obviously here we will implement laser loading for routing because this is the best variant how to make your application faster [Music] and here i already generated fast create react app application so here i have an app component and i already have home component as you can see nothing special here just word home page and about component and actually this component is special because it is quite big this is just a pure text inside but it is a 10 kilobytes of text now let's try to render this about component inside our application this is where inside our app.js we can import our about component from about and now here in site container we can just render about component as you can see in browser our component is successfully rendered but we're interested here in our network tab as you can see here we have directly two chunks of data first of all we have this bundle chairs zero chunk jazz and main chunk jazz and the size here on the right you can see 7 kilobytes 200 bytes and main is 11 kilobytes and the main point is if i will remove here our about component and reload the page again you can see that our main chunk is just 2 kilobytes it is not 11 like it was previously and actually this is happening because after we are importing our component it is bundled together by the pack inside react and here inside our main bundle we are getting all our components and this is totally fine for a small or medium application but at some point you are building big production application and then it just slow why that because your browser must load your js file which can be like 10 or 15 megabytes of data and this is quite a lot and after this browser must parse this javascript and execute it and it takes a lot of time this is why for this we can load our components just with lazy which actually means they are not available for us by default but then we are loading them later at some point and actually here we are talking about our component about so instead of this import of about what we can write here is just const and here const about and here we can write react dot lazy and inside we're providing a function which we'll call an input and here we just put our reference about just like we did previously on the top so the main idea here that we are using react lazy function where we are providing anonymous function and here we are returning our input and now here we have a usage of our about let's reload the page as you can see here we are getting an error a react component suspended while rendering but no fallback ui was specified what does it ever mean we have our component which was delayed or suspended which actually means this component is not available for react at the beginning so react can't render this about component and drag doesn't know what it must render instead the main idea is that we're rendering a fallback until we can render a component and in order to fix that we must wrap our component with react dot suspense component and inside we're providing a fallback and what is fallback it might be a component or just a g6 this is why here i will simply write div loading i'm closing here react suspense and we must put our about component inside react suspense and with that we're saying okay this component inside is lazy loaded and here is our fallback we're loading page and we don't have an error and now the question is do we have any difference with this input on the top and react lazy and yes we have a difference let's have a look on our chunks inside network as you can see here we have our bundle zero chunk main and our main is two kilobytes and after this we have one chunk jazz so as you can see our main was not changed this is still two kilobytes and not eleven so our about component was not bundled together with app component and we're getting this component as an additional script later when we loaded it and yes sure this loading of react lazy import was super fast and it happened on initialize but actually if we will reload this page super fast you might see lloyd in there and actually as you can see i'm reloading it and here is loading blinking on the top which actually means if you have some component which is loaded really long then you will see loading instead and only when your component is ready you will get it and it will be rendered so this is how you're using lazy loading inside react but actually this is not the best use case because this is not what you will use in every single application but what you will use in every single application is routing and essentially we can show every single route component with all children components just when we jump to that specific route it doesn't make a lot of sense on the home page to load other components for other routes in a huge application you can have like 200 500 different routes with lots of components inside we don't want to bundle them together we want to split all our components per route and this is exactly the use case of react lazy for every single project what i want to do here instead i want to create two links inside our container first of all to the home page and secondly to about page this is by here link from react router to slash and here inside will be home and the second link here will be about and the url here will be slash about and i must also import this link from react router dom which actually means i installed previously re-extra autodom inside this project and after this div we must create routes and inside our routes we can create a new route and actually here is our index route where inside we are providing an element and here we just want to provide our home component and the second route here will be with path about this is exactly our component not for home page and actually doesn't make a lot of sense to write suspense for the home because this component is first of all super small and secondly we will for sure load it for every single user but for path about it makes a lot of sense and what we can write here is an element and we're just providing here inside like previously react suspends so we're writing here reacts to spans and here we have a fallback and inside we are providing our markup with div and loading this is mandatory now here inside react suspense i must render about component so essentially we are just defining here a route of react router and inside we are providing path about and an element instead of just about import we're writing here react suspense with about and we're doing that just because here on the top we wrote react lazy which actually means in order to implement react tracy with react router this is your only change now let's check if it's working i'm jumping inside browser and here we have two links home and about and here we are inside home and let's check our network and we must obviously clean the cache as you can see here our main chunk is 2.8 kilobytes so it is not 11 and we didn't load that huge chunk for our about page now here i am jumping inside about page and we see directly our component but the main point is we'll load it 2 kilobytes chunk just for this page and show here we just have a text but inside a huge application with lots of logic you can have like one megabyte bundle per page and actually if you're interested to learn how to implement correctly select inside react for your next project make sure to check this video also you

Channel: Monsterlessons Academy

Views: 7,549

Keywords: lazy loading react, react lazy, react lazy load, react lazy load component, react suspense

Id: kvOp1jffVKE

Length: 8min 30sec (510 seconds)

Published: Tue Jul 26 2022