Improve The Performance of React App with React.lazy and Suspense

Improve The Performance of React App with React.lazy and Suspense

Improve the performance of your React app with React.lazy and Suspense. we will look into how to use lazy loading to optimize load time in our React apps. Lazy loading is an optimization trick💫 whereby we delay the load of an object (image🎦, video🎬, webpage🌎, music file🎶, documents📋) until when it is needed.

Vastly improve the performance of your React apps using (React.lazy() and Suspense)

Lazy loading💤 has come to be one of the optimization techniques widely used now to speed up the load time. The prospect of Lazy Loading helps reduce the risk of some of the web app performance problems to a minimal〽.

In this article, we will look into how to use lazy loading💤 to optimize load time in our React apps.

What’s Lazy Loading💤?

Lazy loading is an optimization trick💫 whereby we delay the load of an object(image🎦, video🎬, webpage🌎, music file🎶, documents📋) until when it is needed.

When a user opens a webpage, all the contents are downloaded in one fell swoop. Most of the contents may never be interacted with or seen by the user. So why waste precious resources and bandwidth?

To boost the response time of our site, we defer the loading of some non-critical parts of our app at load time. These resources are then loaded when the user accesses part of the page that requires it.

SSR, CSR and React

We have SSR(server-side rendered) apps and CSR(Client side rendered) apps.

SSR is the good old web pages built with .HTML and inlined with ASP.NEt, PHP. Each link has a different .HTML file to load

web-app/
 - index.html
 - about.html
 - faq.html
 - careers.html

Each page has a different HTML file.

As JS frameworks emerged, the web pages are mashed up into a single js and loaded in one fell swoop. Upon execution in the browser, the requested page is generated by the browser DOM.

In React, let’s say we have an app like this:

// index.js
export default () =>(<Switch>
    <Route path='/about' component={About} />
    <Route path='/faq' component = {FAQ} />
    <Route path='/careers' component = {Careers} />
</Switch>)// about.js
class About extends Component{
    render() {
        return (<div>About page</div>)
    }
}// faq.js
class FAQ extends Component{
    render() {
        return (<div>FAQ page</div>)
    }
}// careers.js
class Careers extends Component{
    render() {
        return (<div>Careers page</div>)
    }
}

On bundling, webpack packs all the js files into one index.js

react-app/
 dist/
  - index.html
  - index.js

All files index.js, about.js, faq.js, careers.js was bundled into one file. Now, when we load the index.html file it drags along the heavily-laden index.js with it. Now, the time⏰ taken to parse through all the codes in the index.js and rendering will be a long wait. If the time taken for each js file to execute is as follows:

  • index.js 2ms
  • about.js 10ms
  • faq.js 5ms
  • careers.js 9ms

Bundled:

  • index.js 26ms

Therefore we will wait for 26ms!! But if we could separate the files in React and load them on demand, we will see that it will take our app 2ms to load and respond.

So instead of downloading the entire code, we can split the bundle into small chunks and dynamically load them at runtime.

So many techniques have been used to code-split React apps. We see them in the next sections.

⏬Dynamic Import

To code-split, our JS apps, the import() function was introduced. It’s still a proposal, not yet part of JavaScript standard.

This function makes it possible to split our apps into chunks and load them on demand.

The import() takes a string as a parameter. The string is the path of the js file to load.

import('./js_file_to_load.js')

When webpack comes across this, it bundles the file in the path separately.

💤React.lazy()

React.lazy is a new feature added to React when Reactv16.6 was released, it offered an easy and straight-forward approach to lazy-loading and code-splitting our React components.

The React.lazy function lets you render a dynamic import as a regular component. — React blog

React.lazy makes it easy to create components and render them using dynamic imports. React.lazy takes a function as a parameter:

React.lazy(()=>{})// orfunction cb () {}
React.lazy(cb)

This callback function must load the component’s file using the dynamic import() syntax:

// MyComponent.js
class MyComponent extends Component{
    render() {
        return (<div>MyComponent</div>)
    }
}const MyComponent = React.lazy(()=>import('./MyComponent.js'))
function AppComponent() {
    return (<div><MyComponent /></div>)
}
// orfunction cb () {
    return import('./MyComponent.js')
}
const MyComponent = React.lazy(cb)
function AppComponent() {
    return (<div><MyComponent /></div>)
}

The callback function of the React.lazy returns a Promise via the import() call. The Promise resolves if the module loads successfully and rejects if there was an error in loading the module, due to network failure, wrong path resolution, no file found, etc.

When webpack walks through our code to compile and bundle, it creates a separate bundle when it hits the React.lazy()and import(). Our app will become like this:

react-app
 dist/
  - index.html
  - main.b1234.js (contains Appcomponent and bootstrap code)
  - mycomponent.bc4567.js (contains MyComponent)/** index.html **/
<head>
    <div id="root"></div>
    <script src="main.b1234.js"></script>
</head>

Now, our app is now separated into multiple bundles. When AppComponent gets rendered the mycomponent.bc4567.js file is loaded and the containing MyComponent is displayed on the DOM.

🚦React Suspense

Now, what happens when the file mycomponent.bc4567.js gets loaded, there must be a time lag from when it loaded to when the MyComponent it contains is rendered. What will the user see?

Apparently, your app will seem to freeze for some time. That will be a bad user experience. We need to let the user know that something is happening or loading. In order to do that a new feature associated to React.lazy was added it is the Suspensecomponent.

The Suspense component is used to wrap lazy components to show some fallback content while loading the lazy components.

const Lazycomponent = React.lazy(()=>import('./lazy.component.js'))function AppComponent() {
    return (
    <div>
        <Suspense fallback={<div>loading ...</div>}>
            <LazyComponent />
        </Suspense>
    </div>)
}

The component that is being lazily loaded is inserted inside the Suspense component tags. The content to show to the user to tell them that something is going on is placed in the fallback prop of the Suspense component tag.

Components can also be used in the fallback prop:

// ...
function LoadingIndicator () {
    return (<div>loading ...</div>)
}function AppComponent() {
    return 
    (<div>
        <Suspense fallback={<LoadingIndicator />}>
            <LazyComponent />
        </Suspense>
    </div>)
}

Multiple lazy components can be placed in the Suspense tag.

const Lazycomponent1 = React.lazy(()=>import('./lazy.component1.js'))
const Lazycomponent2 = React.lazy(()=>import('./lazy.component2.js'))
const Lazycomponent3 = React.lazy(()=>import('./lazy.component3.js'))
const Lazycomponent4 = React.lazy(()=>import('./lazy.component4.js'))function AppComponent() {
    return 
    (<div>
        <Suspense fallback={<div>loading ...</div>}>
            <LazyComponent1 />
            <LazyComponent2 />
            <LazyComponent3 />
            <LazyComponent4 />
        </Suspense>
    </div>)
}

react javascript programming web-development developer

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

How native is React Native? | React Native vs Native App Development

Article covers: How native is react native?, React Native vs (Ionic, Cordova), Similarities and difference between React Native and Native App Development.

How To Write Better Code As A Web Developer - React

Look at three different React code examples from a beginner, intermediate, and advanced web developer. How senior developers think. How to use React state properly. How to use React useEffect properly. What to think about when programming. The differences between senior and junior developers

How to Become A React JavaScript Developer 🚀

Today Qazi & Sonny will be showing you How To Become a React JavaScript Developer 🚀👨‍💻

Hire Dedicated React Native Developer

Have you ever thought of having your own app that runs smoothly over multiple platforms? React Native is an open-source cross-platform mobile application framework which is a great option to create mobile apps for both Android and iOS. **[Hire...

Top 10 Web Development Trends in 2020 | Web Development Skills

Top 10 Web Development Trends in 2020 will provide you with a detailed list of the trends which are currently being noticed. Upskilling to these trends will help you in landing onto better jobs in 2020-2021.