React.js Lazy Loading: EXPLAINED-JS Tutorial-php.cn

A Complete Guide with a Cheat Sheet and Example

Brief Introduction

Lazy loading is an effective performance optimization technique in web development, particularly with libraries and frameworks like React. It involves loading components or resources only when needed, either in response to a user action or when elements are about to be displayed on the screen. This can reduce the initial load time of the application, decrease resource consumption, and improve user experience, especially on devices with limited performance or slow internet connections.

How Lazy Loading Works in React

React implements lazy loading primarily through the React.lazy function. It is often used in combination with React.Suspense, which handles the loading state and fallback UI. Below are the key steps to understand how to implement lazy loading in a React application.

React.js Lazy Loading: EXPLAINED
1. Dynamic Import with React.lazy

React.lazy enables dynamic import of components only when required. The result is a promise that resolves to a module containing a default React component.

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

Copy after login

In this example, DelayedComponent is loaded only when React attempts to render it for the first time.

2. Wrapping with React.Suspense

To handle the loading state, React.Suspense is used to wrap lazily loaded components. This allows you to display fallback content (e.g., a loading spinner) while the component is loading.

import React, { Suspense } from 'react'; function App() { return (  Loading content...
}>

); }

Copy after login

In the above snippet, waits for DelayedComponent to load before displaying it. If loading takes time, the user will see "Loading content...".

With lazy loading, error handling is essential in case of failures (e.g., a network outage). You can display an error message or a fallback component if something goes wrong during the loading process.

Lazy loading is particularly useful in the context of routing, where different screens or components are loaded based on the URL. With routers like React Router, you can use React.lazy to dynamically load components for each route.

import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'; import React, { Suspense } from 'react'; const HomeView = React.lazy(() => import('./HomeView')); const AboutView = React.lazy(() => import('./AboutView')); function App() { return ( Loading views...