All language subtitles for 003 Adding Lazy Loading_en

Now for this course section

as a demo project, I picked this routing project

we worked on earlier in the course.

This project where we have a couple of quotes

and comments for the quotes and where we use React router.

But of course you can deploy any

of the example applications in this course,

I just picked this one

because there is one very specific optimization step

I wanna show you, which is related to routing.

And speaking of that let's assume

we built our application,

we tested the code and we're happy with our code.

We think it works the way it should.

Therefore, we can now move on to the next step in line,

which is that we wanna optimize our code.

Now with that, I don't mean,

or at least I not only mean that we should write our code

using best practices and so on,

but I'm talking about specific performance improvements

which we could consider.

Now for one, that includes performance improvements

for example, with React memo as it cost way early

in the course already, where I introduced the React memo

to a wide unnecessary component re-render cycles.

In case you're not sure what I'm talking about,

I linked to respect of lecture.

But that's not what I wanna dive in here,

I did talk about this earlier

and whilst we're not using React memo

in this demo application,

it's now not the kind of change I wanna make here.

Instead I wanna introduce another very important concept.

The concept of lazy loading.

Lazy loading means that we load certain chunks of our code

certain parts of our code only when that code is needed.

Because it is super important to keep in mind

that with a React Single Page Application,

you in the end, build one big JavaScript code bundle,

and this entire bundle needs to be downloaded

by every visitor of your website in order to use that site.

So here if I start my development server again

for this demo application this quotes application,

it is important to understand that everything we see here

and everything we're able to use,

like for example being able to switch to this adequate page

all of that is driven by JavaScript by our React code.

And that means that when we visit this page,

if I enter local host free thousand here

and I visit this page,

all that React code that needs to be downloaded

in order for React to draw all this user interface

on the screen and in order for this to be reactive.

So therefore, this all what we see here

and what we use here only works

once all our code was downloaded.

And that means that a user,

a visitor of our website has to wait

until all that code was downloaded

until he or she sees something on the screen,

and until our web application is usable.

And therefore, we wanna ensure that this initial code bundle

this initial first code bundle, which is downloaded

is as small as possible and certain parts of our code

of for example, the code that is related

to adding a quote, is only downloaded

if we actually visit this part of the page.

Because if I enter low close, free thousand

and I only see this starting screen,

and I may be never even add a new quote,

then there is no need to download all the code

that is related to this add a quote feature.

It will only make that initial download bigger unnecessarily

because we don't need that code.

And that's therefore what lazy loading is about.

We wanna split our code into multiple chunks,

into multiple bundles, which are then each

only downloaded when they are needed.

And lazy loading is easy to implement

if you are using routing

because you can then split your code by route.

So that the code for a specific route

is only downloaded when that route is visited.

And therefore let's now implement lazy loading here.

In app JS, we are defining our main routes.

And at the moment we do that by importing

our different page components from the pages folder

and rendering them here.

Now, even though those different pages are only visited

when the URL matches the POS to find here,

all that code is downloaded in advance,

because we have all these import statements here.

And they are all evaluated when our code is bundled up,

which will be part of that build process,

which we'll see in a couple of minutes

and which is also done behind the scenes

when we run that development server.

So we download all the code for all those pages

and for all the components those pages then use,

even though we might not visit all pages.

Now we can easily add code splitting here,

by adding another import and by importing React from React.

And then we can replace those page imports,

with a slight alternative syntax.

For example, let's say, we only wanna download

the code for this new quote component,

when a user really visits this Route.

For this we can remove this import of new quote

and instead add constant named new quote.

I picked this constant name

because I'm using new quote here, down here

when I rendered this component.

Now in here, I now wanna store the result

of calling React.lazy.

That's a built-in method

that will help us with code splitting.

React lazy then once of function,

and here I use an inline arrow function,

which resolves to a dynamic import.

And this syntax might look strange now,

but that is a standard modern JavaScript syntax,

which is supported by this React project set up in the end.

Here as a result of this function,

this anonymous function which are defined here,

we call import as a function.

So here we use the import statement like this,

now we call import as a function.

And cutest function we pass the path of this import.

So pages new quote,

what we previously had up here after from.

Now, this function here

which we pass to React lazy, will be executed by React,

when this new quote component is needed.

And that's the key difference.

It will not be executed in advance

to download the code in advance, but only when it's needed.

And that will therefore create a separate code chunk

which is only downloaded

when this new quote page is visited.

Now, I'm still using the new quote component down there,

but this component is resolved and loaded dynamically,

thanks to React lazy

with this anonymous function past to it.

Now with this alone though, it wouldn't work.

With this if we reload and click on add a quote,

we fail here and if I directly try to visit slash new quote

we get an error, that React component suspended

while rendering but no fallback UI was specified.

Now, what does this mean?

And where is this error coming from?

The problem we have here is that

we are downloading this code only when it's needed.

That's the entire idea behind lazy loading.

But the problem with that of course, is that this download

can take a couple of milliseconds or even seconds maybe.

Now, whilst we're downloading this code,

React is of course not able to continue,

we can't load this component yet

until the download completed.

And that's why we need to define a fallback UI,

some fallback content which can be shown

if this download takes a bit longer.

And for this, we need to import another thing from React,

we need to import the suspense component.

A special component provided by the React library itself.

We need to wrap this around the code,

where we use React lazy.

So for example here, ends out of the layout,

we can now use this suspense component

and wrap this around the switch statement.

And then on this suspense component

we need to set a fallback prop.

Fallback once some JS X code as a value,

which is shown as a fallback,

for example a paragraph where we say loading,

or this loading spinner maybe, which we also have.

I could create a div with a class name of centered,

that's a globally available class,

and in there I will put my loading spinner,

and for this of course you need to import

the loading spinner, which is a component

that already exists in this project.

With this div, with this loading spinner

would be shown as a fallback,

if loading the code for this new quote component

takes a bit longer.

And now with this if we saved as,

I can visit slash new quote,

and we briefly sometimes see that loading spinner

but typically we don't because downloading

the code is roughly quick,

and if I go to all quotes and I load this page,

I'm always able to navigate to add a quote.

Now what's interesting is that if you go to all quotes

or to just local hosts, free thousand,

and you reload this page, if you open the developer tools

and go to network to see all the network requests

that are being made,

if you now click on add a quote,

you see this request to this JavaScript file.

The name might differ for you,

but you see a request that is being sent

to another JavaScript file.

And that is that JavaScript file

with the code that is related

to this form and to handling this form.

And this code is now only downloaded on the mode,

when we visit, add a quote.

That's lazy loading in action.

Now, of course we're not restricted

to using lazy loading for it and you quote page,

we can also use it for a quote detail.

Here we can define a quote detailed constant

and use React lazy like we did it before,

but now for ./pages quote detail.

And now we can and we need to get rid of this input.

We can of course do the same

for the not found page React lazy,

and then import pages not found

and get rid of this import and so on for all the pages.

We can also do this for all quotes,

but of course if we assume that most users

will land on this page anyways,

loading it lazily is a bit redundant

because the code will be needed anyways.

But still since users could also start

on the new quote page theoretically,

we might wanna load this page lazily as well.

So also import ./pages, all quotes here

and get rid of the import down there or up there.

And now all the code is loaded lazily,

and our applications should still work fine here.

If we reload this all still works

but now it uses lazy loading to split our code.

And lazy loading can be an important building block

of an application therefore,

because it makes that initial code bundles smaller.

Now for a very simple applications

like this one arguably still is, it is totally optional,

but especially for large applications with lots of pages

where all the pages then also have a lot of components

and complex logic attached,

in such applications lazy loading can really shine

and can make the initial loading

off your website much faster,

because not all the code is loaded at once

but only the code that's needed.