How To Use Lazy Loading In React

In this article, we will learn how to use lazy loading in react.

–First of all, we have create react application.

-then import lazy and suspense.

import React, { lazy, Suspense } from 'react';

-App.js

One of the most popular design patterns used in online and mobile development is lazy loading. It is frequently used with frameworks like Angular and React to improve the performance of an application by speeding up initial loading.

Lazy loading is a design pattern, to put it simply. You can reduce the initial load time by allowing portions of your application to load only when necessary. For instance, you may initially load the parts and modules needed for user registration and login. The remaining components can then be loaded based on user navigation.

Lazy loading may not make a significant effect for small-scale applications. But by shortening the initial load time, it has a major effect on large-scale applications. In the end, it enhances both the user experience and the functionality of the application.

Advantages:

reduces the package size to speed up initial loading.
reduces the burden on browsers.
enhances application performance when there is limited bandwidth.
enhances the user experience at the first loading.
optimizes the use of resources.

import React, { lazy, Suspense } from 'react';
 import './App.css'; 
import Spinner from './Spinner'; 
const MainComponent = lazy(() => import('./Components/MainComponent')) 
function App() 
{ 
  return (<Suspense fallback= {<h1>Loading ... </h1>}}>
   <div className="App" >
      <MainComponent /> 
    </div > 
   </Suspense> );
 } 
export default App;

output;