A React Router tutorial which teaches you how to use Lazy Loading with React Router 7 . The code for this React Router v7 tutorial can be found over here .
Lazy Loading on route level with React Router is a powerful feature. Usually a client-side rendered React applications comes as one bundle from a web server. However, when enabling lazy loading, the bundle is split into smaller bundles. When a user visits a specific part of the application, only this part lazy loads on demand. The term for this optimization is called Code Splitting and improves the performance when a user navigates through a larger React application.
In the following we will recreate this scenario with React Router. To illustrate how this works and how you can implement lazy loading on route level when using React Router for introducing code splitting in React yourself, we will start off with the following example:
In this function component we have matching Link and Route components from React Router for the / and about/ routes. Furthermore, we have a so-called No Match Route loaded with the NoMatch component which acts as fallback route. From here, we will explore the concept of Lazy Loading.
Both, Home and About component, are imported from another folder/file. They are not doing much for the sake of keeping this example small. For instance, the Home component could look like the following:
Lazy loading a component in React is not difficult, because React offers a top-level API for it called React.lazy . Because we already import both page components from another file, we can just use Reactâs lazy() method as wrapper here:
You may have noticed that we are using React Suspense here to offer a fallback React element when the component is lazy loaded from the server. At this point, itâs worth to note that lazy loading is nothing React Router specific but rather React specific, because we as developers choose to apply React.lazy method on a page component which enables lazy loading on a route level. However, any component can be lazy loaded this way.
If both page components would be named exports instead of default exports, lazy loading with only using React.lazy would change to the following:
Optionally, I want to show you a popular lazy loading library for React called @loadable/component . After installing it, you can use it this way for default exports of page components:
See how this library applies React Suspense by default. Furthermore, if your page components happen to be named exports, you can lazy load them the following way:
Thatâs it. We have introduced lazy loading on a route level by using Reactâs lazy function. Furthermore, we introduced an opt-in library that helped for the sake of convenience. After all, using cope splitting on a route level improves the performance for larger React applications, because your users do not have to download the whole application. Instead, only one the root plus one page is loaded. When a user navigates to another page, this page is lazy loaded.