Lazy Loading with React

150 150 DevGate

Author: Muhammad Fraz,

The world of front-end development is constantly evolving, and people are creating more and more complex and powerful applications every day. Naturally, this led to massive code bundles that can drastically increase app load times and negatively impact the user experience. This is where lazy loading comes in.

What is Lazy Loading?

Lazy loading is a design pattern for optimizing web and mobile apps.

At the point when we launch a React web application, it normally packages the whole application immediately, stacking everything including the whole web application pages, pictures, content, and considerably more for us, possibly bringing about a sluggish burden time and overall poor performance, depending on the size of the content and the internet bandwidth at the time.

In earlier versions of React, lazy loading was implemented using third-party libraries. However, React JS introduced two new native functions to implement lazy loading with React v16.6 update.

In this tutorial, we’ll show you how lazy loading works in React.js, demonstrate how to use code splitting and lazy loading with React.lazy and React.Suspense, and create a React demo app to see these concepts in action.

The Benefits of lazy loading

The essential benefits of languid stacking are execution related:

  • Fast initial loading: By decreasing the page weight, lethargic stacking a site page considers a quicker starting page load time.
  • Less bandwidth consumption: Lazy-loaded images save information and transfer speed, especially valuable for people who don’t have fast internet.
  • Decreased work for the browser: When pictures are lazy-loaded, your browser does not need to process or decode them until they are requested by scrolling the page.

React.lazy() is a function that empowers you to ender a dynamic import as a regular component. Dynamic imports are a method of code-splitting. It takes out the need to utilize an third party library, for example, react-loadable, react-waypoint

// without React.lazy()
import NewComponent from ‘./NewComponent ‘;

const MyComponent = () => (

)

// with React.lazy()
const NewComponent = React.lazy(() => import(‘./NewComponent));

const MyComponent = () => (

)

React.Suspense enables you to determine the loading indicator in the event that the components in the tree below it are not yet ready to render.
When all the lazy components are loaded, other React elements can be shown as placeholder content by passing a fallback prop to the suspense component. it allows you to define the loading indicator if the components in the tree below it are not yet ready to render.

import React, { Suspense } from “react”;

const LazyComponent = React.lazy(() => import(‘./NewComponent)); const LazyComponent1 = React.lazy(() => import(‘./NewComponent1));

const MyComponent = ( ) => (

Loading…

}>

{* Here you can add more lazy components.. *}

)

The Disadvantages of lazy loading

As already mentioned, lazy loading has many advantages. However, overuse can have a significant negative impact on your application. Therefore, it’s important to understand when you should and when not to use lazy loading. The disadvantages are mentioned below

  • Not suitable for small-scale applications.
  • Requires additional communication with the server to fetch resources.
  • Can affect SEO and ranking.