Lazy Load you React Components

Make your React websites load faster

What is Lazy Loading ?

Lazy loading in React is the technique that is used in optimizing out web and mobile apps.

How it Works ?

This technique uses a method that renders only very important or critical user components in the first, rather then loading the whole website at once and then rendering the non-essential components later.

As we write more and more code, as we write more and more components, the size of the application grows significantly bigger and it starts hindering the websites performance because now the bundle size has been increased. This makes the app look slow and chunky and hence directly lead to bad user experience.

So to avoid all the hiccups that I explained above Lazy loading is a Savior to avoid all this and has many other advantages.

There are a couple of benefits of lazy loading

Faster load times for apps/websites

Saving data or bandwidth

System resources are saved both on the client and server-side.

**Note: Loading all the components even when they have no use in the UI right now is wastage of bandwidth and resources. So its better if the content is asked/delivered only when required. Thats why Lazy loading makes sense.

I have my personal portfolio at Shubam Bhasin that uses Lazy loading, just have a look the the bundle size its so small that website loads up quickly.

Okay ! Enough talking lets write some code

Official Reference*: React Lazy Loading*

The React.lazy() function lets you render a dynamic import as a regular component.

e.g.,

Before Lazy()

import OtherComponent from './OtherComponent';

after Lazy()

const OtherComponent = React.lazy(() => import('./OtherComponent'));

You just have to add React.lazy() and then pass the import statement as a call back and half of it is done

Here is small little catch

All thee lazy components should be rendered in a Suspense component, which allows to show some regular react component before loading the lazy compoennt like a Loading screen etc

e.g.,

import React, { Suspense } from 'react';

const OtherComponent = React.lazy(() => import('./OtherComponent'));

function MyComponent() {
  return (
    <div>
      <Suspense fallback={<div>Loading...</div>}>
        <OtherComponent />
      </Suspense>
    </div>
  );
}

You can even wrap multiple lazy components with a single Suspense component, just like below

import React, { Suspense } from 'react';

const OtherComponent = React.lazy(() => import('./OtherComponent'));
const AnotherComponent = React.lazy(() => import('./AnotherComponent'));

function MyComponent() {
  return (
    <div>
      <Suspense fallback={<div>Loading...</div>}>
        <section>
          <OtherComponent />
          <AnotherComponent />
        </section>
      </Suspense>
    </div>
  );
}

Sometimes it can happen that the component fails to load, then what ?

React.lazy do support error boundaries.

You can handle these errors to show a nice user experience and manage recovery with Error Boundaries. Once you’ve created your Error Boundary, you can use it anywhere above your lazy components to display an error state when there’s a network error.

e.g.,

import React, { Suspense } from 'react';
import MyErrorBoundary from './MyErrorBoundary';

const OtherComponent = React.lazy(() => import('./OtherComponent'));
const AnotherComponent = React.lazy(() => import('./AnotherComponent'));

const MyComponent = () => (
  <div>
    <MyErrorBoundary>
      <Suspense fallback={<div>Loading...</div>}>
        <section>
          <OtherComponent />
          <AnotherComponent />
        </section>
      </Suspense>
    </MyErrorBoundary>
  </div>
);