Lazy Loading in React

Lazy loading in React is a method that loads components only when they are required, rather than loading all components simultaneously when the application starts. This technique improves the performance of the application by decreasing the initial JavaScript bundle size. For instance, consider a web application with three pages: Home, About, and Dashboard.

If lazy loading is not used, the JavaScript code for all three pages would be included in the initial bundle, even if the user never visits the About or Dashboard pages. However, when lazy loading is implemented, React loads the Home page first and subsequently loads the About or Dashboard page when the user navigates to them. The primary advantages of lazy loading include faster initial loading times, smaller bundle sizes, an enhanced user experience, loading components as needed, and better management of large applications with numerous pages and features.

To implement lazy loading in React, developers can utilize two built-in features provided by React: React.lazy() and Suspense. Here's how it works:

1. Suppose you have a component called Dashboard.jsx. First, import the necessary modules from React:

```javascript

import { lazy, Suspense } from 'react';

```

2. Define the Dashboard component using lazy loading:

```javascript

const Dashboard = lazy(() => import('./Dashboard'));

```

3. In your main component, such as App.jsx, use lazy loading and Suspense to load the Dashboard component only when needed:

```javascript

function App() {

return (

<div>

<h1>My React Application</h1>

<Suspense fallback={<p>Loading Dashboard...</p>}>

<Dashboard />

</Suspense>

</div>

);

}

```

When the user navigates to the Dashboard page, React loads the Dashboard component's code only at that moment, rather than including it in the initial bundle. This results in faster load times, a smaller bundle size, and a better overall user experience.