What is lazy loading in React?

Lazy loading in React is a performance optimization technique where components or code are loaded only when they are needed, instead of being loaded at the initial page load.

This helps reduce the initial bundle size and makes the application load faster.

What is Lazy Loading?

By default, React loads all components when the application starts. In large applications, this can slow down the initial load time because the browser has to download and execute a large JavaScript bundle.

Lazy loading solves this by delaying the loading of a component until it is actually required.

---

How Lazy Loading Works in React

React provides built-in support for lazy loading using:

---

Basic Example

```jsx id="lazy_example_1" import React, { Suspense } from "react";…