How do I use React.lazy?

Can you explain how to use React.lazy for code splitting?

Sure! React.lazy allows you to load components lazily, which means they are only loaded when needed. This helps in reducing the initial load time of your application.

How do I implement it in my project?

To implement React.lazy, you first need to import it from React. Then, you can wrap your component with React.lazy like this: const LazyComponent = React.lazy(() => import('./LazyComponent'));.

What about error handling when using React.lazy?

Good question! You can use the Suspense component to handle loading states. Wrap your lazy-loaded component in Suspense and provide a fallback UI.

Can you give me an example of using Suspense with React.lazy?

Absolutely! Here's a simple example:

import React, { Suspense } from 'react';
const LazyComponent = React.lazy(() => import('./LazyComponent'));

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