Ladies and gentlemen today, we're going to talk about a new feature in react called Lazy, okay. Basically you can now you can lazy load components in react, which is pretty cool I was waiting for this feature for a long time and now it's finally here and it actually brought some Interesting other features as well. We're gonna look at it. So I want to keep it a surprise and it's really fun and Welcome to Techsith Tutorial! Alright so those people who don't know what lazy loading is it's exactly what it sounds like Instead of loading everything at the same time. You can load something asynchronously, a piece of page asynchronously. So Your page is rendered while the other pieces are loading. Okay, if you notice like if you have a table and if you scroll up and in some tables, it lazy loads the the rest of the the rows as you scroll. They're often lazy loading, right. In order to use that feature. You need to have React version 16.6 or later. And I'm using this create-react-app, which is the latest version so I'm fine. So I'm gonna first build a component that we're gonna lazy load, and it's gonna be a very simple tutorial. So, we can we can move really fast All right. So let's create a folder called `components` and inside we're gonna have myComp.js I could not come up with a better name. So I'm gonna name it myComp.js. And let's import React. And, it's a simple component. I'm just gonna simply export default it returns a very simple `div` With "Hi there, I am now loaded!". Okay, just gonna save this. All right. Now let's use this component inside this (App.js) `import myComp from` from where? From `components/myComp`. Okay, and let's use it. Very simple, right? Alright, so now let's try, at least see what it renders. Alright. Voila! Now it renders is great text called "Hi there I am now loaded!" Nothing special right? Nothing really special. Let's try to load this component. Let's lazy load this component. So the same syntax is... I'm gonna also keep this so we can see the difference Syntax is `const MyComp =`. I would need a few things. So I would need here, { lazy } from react so I can say lazy Inside I would have an arrow function which will import same thing './components/myComp'. So the syntax is pretty simple, but instead of this `import` syntax, we would We would have a callback function which was lazy loading. Now if I try to render it, it gives me an error You know why? because When I when I render this page `MyComp` is supposed to be lazy loaded which means it actually happens while this page is loading and often after this page has loaded. Okay, and When this page has loaded this page doesn't know what `MyComp` is, because it's not loaded yet. Ok, so that's a problem. So how to solve this problem? Well, there is a suspense so we would have to import another `Suspense` capital 'S' now what this Suspense does is it will to render something while our component is rendering okay, so Let's say if I wrap the entire page with Suspense. Okay. There's too much suspense here (hehe) Now the Suspense has to have some... something to render So it has a `prop` called `fallback`. Not backfall Okay which could be a component. But here I'm just gonna say `div` and I could say "Loading..." Okay That's all I need to do. Okay, I need to actually Take this one out (comment out). So there's no duplicate. if you notice Well, let me make it shorter smaller If you notice it glows Really quickly, and there's a loading here if you notice Okay because this component is It's very lightweight It loads really fast obviously and plus my internet might be really fast. Luckily. Okay, if I want to see it What I have to do is throttle my internet speed and here inside the network tab I have Throttling available, so right now I can say disable online fast 3G and I'm gonna pick Slow 3G. Okay. Alright. So on slow 3G I can clearly see now loading and then it loads it. Okay But what if I have something here, right? Let's say I might have Something here `<div>another component</div>`, right for that Here nothing actually Loads until that This component loaded, right? So what I want to do is I want this to load first and then when this is available This should load while this is loading It should show loading here, right? So I should actually wrap the Suspense only around `MyComp` Let's format this document. All right. So now if I Re-render if you notice now, there's another component And then there is a loading and when The component of that I'm lazy loading when it's available the loading goes away. So that's the suspense basically While the component is not available. It falls back on this Component that is provided, okay? So this is in nutshell how lazy loading works. Okay, and I'm gonna upload this code on the my github so you can check it out. The link should be in the description And if this is the first tutorial you looked at on react I have a bunch of other tutorials whole series of it and you can check it out I'll provide a link here and I hope you learned something new from this video and if you did please like don't forget to Like like subscribe and comment And you can help this channel via patreon I'll provide a link here and you can also translate this video for me to your native language. This is very important I'm always looking for people who translate. Okay, so people from your country or your region can also learn It's very simple. The instruction should be in the in the description and if you do decide to translate please email me and So that I can approve it and I can give you credit in the next video. Thank you!
