React Suspense And React.lazy By Example – React 16.6

6 was released this week and chorus pleading with suspense is probably the most interesting feature at least in my opinion in this video we’ll show you how to implement code splitting with suspense and reactor lazy this new feature allow us to lazy load components so they will be requested only when needed help in performance in this example.

I that we can see here and just showing a hide in an image if we see if I click on this button here I just I change the state of these this component so it renders a component called capital J.

S and when is helium you basically doesn’t render the the component so very simple sample so let’s see the code as we can see here this is the the main app this is just the the fold up that is generated by the query app app tool so I just did a little modifications here basically added some some state this the new flag here this is to show and hide the image so by default is false and I add these two methods once to want to show the image another one to hide the image.
And here depending on on the state of of this flag if he’s false I can.

Show the the cut component but if is true I show that cut component here when I click on the button this change changes the state of the of this flag so this is the cut component it’s just this deep with with a simple image using the place kitten API here I just typed some kind of style to there to the button so before we implement suspense and lazy loading.

Let’s see a few things here in the in depth tools I have here Dan or tab open let’s reload this we.

Can check out here the the state in the react tools I can show here the image if I change the state so yeah it’s very simple in the network tab if I interact.

With this we should not see any difference so now let’s see what happens when we.

Implement the AC loading so let’s go to the code and we need to import here two modules suspense and lazy so this import will.

Change now instead of doing this we will have to create a new constant we can call.

This cut and we should call lazy here and pass anonymous function with the import and here we put the path to the to the model so should be cut days and the other thing we need to do is to wrap this component in the suspense component and here we need to.

Specify a callback this will be used when the weather component is loading and for some reason is not shown yet so which you see on a spinner or something like that to give figure feedback to the user that something happened is happening there so this is suspense.

And this this here say this lighting does it so now if I click here we shall see something HAP here as you as you can see the component was loaded and if we simulate a slow connection let’s say we are on 3G and reload this page and if we click here we should see the loading message and.

That’s the fallback we specified in the the props and that’s pretty much it this is a very simple implementation obviously it could be helpful to use to use the suspense component in things like routing and probably some others cases this component is still in progress there are many features that will be released later so I think things.

Will get more interesting in the future if this video was helpful make sure to LIKE and subscribe and I see you on the next one.