React Lazy Load Code to Load Faster | React Code Splitting Tutorial

do all your users use all of the parts of your react app if not you're sending them too much code [Music] hello and welcome I'm Dave today we'll look at code splitting in react also known as lazy loading and I'll provide links to all resources in the description below I'll also provide a link for you to join my Discord server where you can discuss web development with other students and you can ask questions that I can answer and receive help from other viewers too I look forward to seeing you there the starter code for today is at the GitHub Link in the description and there will be a starter directory and a completed directory both directories have a working sample react app but only the completed directory has code splitting applied with react lazy let's look at our example react app you can see we have a bar at the top that says react lazy loading and in the middle we just have a word home then there's a link says go to admin so we can go to an admin page now for today's purposes we're going to have to pretend that this link is only visible to people that would have an admin role I did not set up roles and all of those things for this tutorial tutorial because we can just say okay only admins can see this link and if they can see this link then they can click it and go to an admin page as well and it's a really simple page now I did put like a hundred paragraphs just so it had a lot of content with a lot of words but besides that very simple page now I want to open Dev tools and what we should look at I'm at the sources tab in Dev tools here in Chrome when we reload and when we do reload today we will right click on the reload and we'll choose empty cache and a hard reload now when we do this we want to look in the source directory to see all of the components that have loaded so here we have the main page and the app page and there's our index CSS now if we open up the components directory here we can see there's a layout component because we're using react router there's a home component a header and then there's an admin and an admin hello so two specific components that you could only use if you're an admin the rest of the users of our app would not be able to use these components and then there's also some skeleton loaders in here I believe as well and we may see those but overall the main thing we want to pay attention to is the admin hello and just the admin component overall because we're loading this in no matter who loads our web app but we don't really need to do that we only need to load in the admin components if an admin is going to use our web app so now I'm in vs code and let's take a quick look at this starter code now I am using react router today if you're not familiar with that I have a tutorial for react router on my channel and then in the very recent past here I have completed tutorials on skeleton loading components and also on react suspense and we'll be using both of those today so if you want to dive deeper look for those on my channel now let's look at this code this uses react router I put the the main react router code in the main.jsx here and that's what we have because it is a Veet application that we used here instead of create react app so we have browser router from react router and then routes and then I take my single route and it has the Slash and the asterisk so we could Nest routes and send to the app and I like to put all of that here in the main.jsx if used create react app your main would be index but either way that's where I like to put that then when I go to the app component I just have everything inside of routes now you can see I have my main route with the slash so really everything catches here and that's where we use this layout component and that layout component brings in the header and things so I'm explaining react router you may already know that but if you don't I'm just giving you a quick overview now here's our index route that goes to our home so that loads immediately and then there's the path admin so it would be slash admin men and that's what loads the admin component so only if we could see that link as an admin would we even be able to access this component and that's the point today we don't really need to load any of the JavaScript associated with the admin components unless we have an admin that can use those components and the problem we currently have is we're sending all of our JavaScript including the JavaScript for those admin components so let's fix that and we'll start here at the top I'm going to comment out our import of admin and instead I will come down just below and I will import now I'm going to choose lazy from react and there you can see we have that now and instead I'll Define admin underneath and I'll say const admin and set this equal to Lazy which takes a function and then inside of this function we will import and here we essentially specify what we did above so it's dot components our DOT slash components slash admin so I'll just copy this and I'll paste it right here inside of the import oh it does need to be inside of quotes as well so I'll just put single quotes there we go and save and now we can lazy load this component but it's not quite that easy we actually need to wrap it in some some things as well so we have our admin here and if we go to our application so let me drag this over and go back to our application and I can reload this and we should get the changes but if I try to go to admin right now it doesn't work so we're not quite ready yet and that's because when we lazy load things with react lazy and I'll reload here and we're fine now when we reload things with react lazy we also need to use react suspense it's a requirement and we also have another requirement and that is to use default exports so for example in our admin component and you can see I have the 100 paragraphs here rather large but when I get to the bottom I do have the export default for admin and that's what lazy expects so we need to use the default exports and then we need to use suspense from react as well so let me import that here at the top there I saw it in the list and now we can use suspense and now to use suspense instead of wrapping it around a route you cannot do that in react router we need to put it right here inside of the element equals so I'm just going to come down to add some extra lines here and then we'll wrap this admin component in suspense so let's add suspense now suspense has a fallback and we'll set that equal to our skeleton admin in component that I already created and once again if you're interested in learning how to create skeleton loading components I have a separate tutorial on those as well oops I closed that out and we don't want to do that we just want the carrot there because we need the closing suspense after admin so here we would have the slash there it is and suspense and once I save it should look a little bit better there we go so now we've wrapped admin and suspense but what we learned in my tutorial about react suspense is that you should always use an error boundary with react suspense as well and so we need to add react error boundary as a dependency and then I'm going to come back and update the Imports because we need to import that skeleton admin component as well so I will open up the terminal here Ctrl C to currently stop our Dev from running and now let's say npm I and we want react Dash error Dash boundary added as a dependency so I'll quickly add this and we could look at our package Json just to make sure it is there and now we see react error boundary has been added let's go back to the app now and now let's add all of those Imports that we need up here above so I will I'm down a couple of lines and say import and now I want error boundary so we'll find that in our list from react error boundary that is correct and then I have created an error fallback component as well and it is really from the air or react error boundary docs and so you could learn more about that in my tutorial again about react suspense and react error boundaries but so this component is just called error fallback so now go ahead and well that didn't work let me find that here do we have it in our component list yes there it is right here so we can get that from components we want import air fall back there it is in the list I just missed it before so we've got error boundary error fallback and now I need that skeleton admin component as well there I see it in the list and it didn't auto complete for me so I want from dot slash components slash skeletons slash skeleton admin there it is now I've got all the Imports I need but we still need to wrap our suspense in that error boundary so once again still within this element equals here of our route let's add this error boundary so we'll start off with error boundary and then error boundary has a couple of things we need to add to it as well so I'm going to add them on separate lines the first is a fallback component and we'll set that equal to the error fallback component that I had imported after that we can go ahead and add an on reset function also so let's say on reset equals now inside of this we need to provide an anonymous function and here we can provide the function or call that we want to provide maybe this would be a set State and that is fairly common if we had some local state that needed to be reset that is not what we will do right here though I need to go ahead and close this out as well so let me put that Arrow there that is not where we need the closing error boundary though that is going to go at the end of after the suspense and before the curly bracket there's the closing error boundary I feel like I'm missing something else but it's probably just what needs to go in this function but what needs to go in the function is a navigate function because we're using react router so I'm going to bring in use navigate now that I have that I will say const navigate and set that equal to use navigate now that I have a navigate function that's what I'm going to pass in here to my on reset so I say navigate and this will allow anybody that encounters an error oh and here's part of my problem here as well so this fallback component a couple of extra things that looks better so anybody that has an error say if they navigate to the admin page they will get this nice air fallback component and it will give them a button that says try again when they click that it will navigate back to the home page for example so we're now wrapping our suspense in an error boundary and we have wrapped our admin component in suspense and you need to use suspense it's required that you use it with any component that you lazy load now I should say any component tree because we have a nested component inside of admin that is our admin hello we don't have to actually use lazy with it it's going to be lazy loaded when the admin component loads so it won't load when the hello page or our first load of our app happens it will only load when we go to the admin page or the admin component okay with these changes now in place let's go ahead and open the terminal again and we will start up our project once again with npm run Dev and now we're ready to view the project which was already in the browser so let's just reload it over here and now let's look at this Source directory again and once we look at the source directory we've got components here and we open this up notice we have no admin components we do have the skeleton directory here and this will have a skeleton for the admin because that's what we actually load when we're waiting on loading the admin components that's part of react suspense but what we have here where we were seeing the admin and admin hello they did not load so now when we go to the admin page we see a change and now those components load so we lazy loaded those so that took a large chunk of JavaScript and waited to load it it loaded it dynamically only when we went to that page so once again if we go back to our example maybe not all of our users are admin users and of course we have to pretend that they have to be an admin user to see this link however if we were building out a full large app this could be very useful if there were say a large dashboard or something like that that an admin or maybe a different type of user has access to only part of an application and you only want to load that JavaScript if that user shows up and tries to access those components so in Dev mode we see all of these individual things and if I come to the network tab actually we see all kinds of things loading here but you can see we're in localhost this is Dev mode so I actually have this loaded up on the web this example app and let's look at how we get chunks of JavaScript when we're looking at the network tab okay I have this app now on render.com I'm going to open Dev tools once again and we're on the network tab but things look a little bit different we didn't load the same thing that we had before so let me go ahead and do a hard reload here with an empty cache again right click on your reload once you have dub tools open and you can do that and I do that and we get these chunks of JavaScript we don't get all the things we were before and you can see here we've got like 55.9 kilobytes and that's after it is zipped or g-zipped actually because before it says resource size and I don't know if you can see that but it was 165 kilobytes but that's not all so now if we were to go ahead I can clear this out out actually so we can see what happens we go ahead and go to the react lazy loading admin page go there and look we saw the suspense we saw that skeleton loader for just a little bit and then we loaded some more JS that's actually labeled admin Dash and it has some numbers and letters over here as well 23.2 kilobytes and I don't know if you can see the full resource size before zipped was 78 kilobytes so we really waited here let's look at this time as well that we see in the network tab if I can pull that over now we can see the rest of the time 354 milliseconds now let's go ahead and throttle this let me go back and we let me do a empty cache and hard reload once again so it doesn't cache anything or we wouldn't have to wait every time now let's go to some throttling here let's do the slow 3G throttling that we can in the network Tab and I'll clear this out and now let's go to the admin page we should see this suspense loader the the skeleton loader a little bit longer and now it took two and a half seconds not 350 milliseconds but two and a half seconds to load on a slow connection so that's a big difference just because I have a hundred paragraphs in this page so again you can lazy load components don't use it everywhere but when you have sections of your app that not all users need it's a great tool to only send the JavaScript that you need to send remember to keep striving for Progress over Perfection and a little progress every day will go a very long way please give this video a like if it's helped you and thank you for watching and subscribing you're helping my channel grow have a great day and let's write more code together very soon

Channel: Dave Gray

Views: 10,776

Keywords: react lazy load, react lazy, react, react js, react lazy loading, react code splitting, code splitting, react lazy tutorial, react lazy load tutorial, react lazy loading tutorial, react code splitting tutorial, react tutorial, react js tutorial, code splitting tutorial, how to lazy load, react code, lazy loading, lazy load, react lazy loading components, react lazy loading and suspense, react lazy load video, react lazy loading page, js, code splitting react, suspense

Id: nS5qbSJLGx8

Length: 16min 41sec (1001 seconds)

Published: Fri Feb 03 2023