Advanced React Topics : Code Splitting Using React Lazy And Suspense

Code Splitting

It's a feature supported by bundlers used to create multiple bundles to be loaded dynamically at the runtime. For example, let's take a blogging site which has many pages and is very heavy. Let's say it has a Home Page which is a landing page, a Profile Page, as well as a Messages Page. Now, if we try to load the whole website at the initial load, it will take a long time. Now this long initial loading time has a lot of negative consequences like bad Bounce Rate of users, bad SEO Ranking of the website and many more. To deal with such problems, Code Splitting is done.

Now, what code splitting does, in simple words is that it loads only the landing page, which is the Home Page in our example, at the initial loading. Whenever the user clicks on the URL to other pages of the web app, that page along with the distinct components used in that page are loaded at that time and not on initial load. It in turn reduces initial loading time and increases User Experience.

React Lazy

Now, for code splitting in React Web Apps, a function called lazy is used.

Steps to use React Lazy

Step 1: We need to import lazy at the place where we are importing other pages. This could preferably be the AppRouter Component where all the routes are specified.

import { lazy } from 'react';

Step 2: Next we need to import the pages other than the landing page or the things we don't need at initial loading using the lazy function.

const Profile = lazy(() => (import './pages/Profile.jsx'));
const Messages = lazy(() => (import './pages/Messages.jsx'));

And that is it. We have successfully implemented the react lazy function.

Now, the next problem that we face is when we click on the link to go to the Profile Page or the Messages Page and if it's heavy to load in an instant, we are faced again with a problem of loading time, but this time lets deal this situation differently. In such a case we can show a loading screen with Skeleton Loading. This is done only when there’s more than 1 element loading at the same time that requires an indicator and the time to load components is greater than 300ms but smaller than 2s. The main purpose of using it is to drive users' attention to progress instead of waiting time.

Skeleton Loading Screen Of Youtube

Suspense

Now, we can use suspense to show a Skeleton Loading screen while the components are loading and then show the loaded components on the screen. Suspense in other words lets us display a fallback until its children components have finished loading.

Steps to use Suspense

Step 1: We need to import suspense at the place where we are using React Lazy or where we want to show Skeleton Loading.

import { Suspense } from 'react';

Step 2: Use <Suspense /> tag where we need to put the Skeleton Loading. In our example, we need Suspense inside the Route tag.

//For Suspense On Loading Profile Page
<Route path='/profile' element={
                                <Suspense fallback={<Skeleton Loading />}>
                                    <Profile />
                                </Suspense>
                                }>

//For Suspense On Loading Messages Page                                
<Route path='/messages' element={
                                <Suspense fallback={<Skeleton Loading />}>
                                    <Messages />
                                </Suspense>
                                }>