The Lazy Effect: React

Lazy loading allows for a quicker page load time. Lazy loading conserves bandwidth by delivering content to users only if it's requested. It allows you to load parts of your application on-demand to reduce the initial load time.

In fact lazy loading itself is a design pattern. With Lazy loading, components are imported by React App only when the relevant route is visited.

Let's look into a real-time example to understand the concept. Following is a route file for a simple application with route. Each route is mapped with a separate component.

import { Switch, Route } from './react-router-dom';
import ComponentA from *./components/ComponentA’;
import ComponentB from *./components/ComponentB’;
import ComponentC from *./components/ComponentC’;
function App() {
return (
<Switch>
   <Route path='/a' exact>
      <ComponentA />
   </Route>
   <Route path='/b"' exact>
      <ComponentB />
   </Route>
   <Route path='/c' exact>
      <ComponentC />
   </Route>
</Switch>

Though there is no issue with the above code and it will work fine. Also, for a small application there is no significant effect. But in real life projects application are complex and requires proper implementation to improve loading performance. Problem with this approach React loads all components all at once and will not allow accessibility of the application until all components are ready. Hence, it takes time to load and access the application. Also, User may not access the whole application hence, what is the point of loading all the components at once..?

The Lazy Effect
The solution in react to the above issue is Lazy Loading. With Lazy loading components are imported by react app only when the relevant route is visited.

Below are few easy steps to implement the same;

• Import lazy and Suspense from react library.

import {lazy, Suspense} from 'react';

• Use import function for your component.

const component = () => import('./components/Component');

• Now wrap imports in lazy()

const component = lazy(() =>  import('./components/Component'));

• Next is to wrap returns in Suspense()

function App(){
            return (
                   <Suspense>
                     {/* all return components */}
                   </Suspense>
                   )
              }

• The last step is to specify fallback for suspense()

<Suspense fallback={ <div> Loading... </div> } >
          {/* all return components */}
</Suspense>

Following is the complete code of the same. Now the problem is resolved. For a large application you will experience significant improvement.

import { lazy, Suspense } from ‘react’;
import { Switch, Route } from './react-router-dom';
const ComponentA = lazy(() => import('./components/ComponentA'));
const ComponentB lazy(() => import('./components/ComponentB'));
const ComponentC lazy(() => import('./components/ComponentC'));
function App() {
return (
<Suspense fallback={
<div>Loading...</div>
} >
<Switch>
   <Route path='/a' exact>
      <ComponentA />
   </Route>
   <Route path='/b' exact>
      <ComponentB />
   </Route>
   <Route path='/c' exact>
      <ComponentC />
   </Route>
</Switch>
</Suspense>

Connects

Check out my other blogs:
Travel/Geo Blogs
Subscribe to my channel:
Youtube Channel
Instagram:
Destination Hideout