Use the React.lazy function to lazy load components. Lazy loading is a technique that defers the loading of non-critical resources until they are actually needed. In the context of React, lazy loading can be used to improve the performance of your application by reducing the initial bundle size.

React.lazy is a function that allows you to load a component lazily, i.e., only when it is actually needed. It works by dynamically importing the component and returning a new component that can be rendered. This new component behaves just like the original component, but it is loaded asynchronously.

Here is an example of how to use React.lazy to load a component lazily:

import React, { lazy, Suspense } from 'react';

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

function App() {
  return (
    <div>
      <Suspense fallback={<div>Loading...</div>}>
        <LazyComponent />
      </Suspense>
    </div>
  );
}

export default App;

In this example, we are using the lazy function to load the LazyComponent component lazily. We are also using the Suspense component to show a loading indicator while the component is being loaded.