Lazy loading is a technique that allows you to load parts of your application lazily, or only when they’re needed. This can significantly speed up the initial load time of your application.
In React, You can use lazy loading with the help of `React.lazy()` and `Suspense`.
Here’s how you can do it:
1. You can import the dynamic component using `React.lazy()`. It returns a lazy-loaded component and must be combined with `React.Suspense`.
For example, consider we want to lazy load a component named `MyComponent`. Here’s how you can do it.
```
const MyComponent = React.lazy(() => import(‘./MyComponent’));
```
1. Wrap the lazy components inside `React.Suspense` and provide a fallback UI that will display while the component is being loaded.
```
import React, { Suspense } from ‘react’;
const MyComponent = React.lazy(() => import(‘./MyComponent’));
function App() { return (
export default App;
```
In this code, `Loading…` will be displayed until `MyComponent` finishes loading.
Remember that `React.lazy()` and `Suspense` are not yet available for server-side rendering. This is only for the client-side or browser rendering.
For the code-splitting in Server side rendering, you can use libraries like `loadable-components`.
Please note that route-based code splitting is one of the best ways to implement lazy loading and improve application performance. If you are using `react-router`, you can choose to only load certain routes when they become active.
