How can I use React.lazy for code splitting?

How can I use React.lazy for code splitting?

You can use React.lazy to dynamically import components, which helps in code splitting. Here's how to do it:

1. Import React and the component you want to lazy load:

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

2. Wrap the lazy-loaded component in a Suspense component to handle loading states:

   <Suspense fallback={<div>Loading...</div>}>
       <LazyComponent />
   </Suspense>
   

This way, the component will only be loaded when it's needed.

What happens if the component fails to load?

If the component fails to load, you can handle errors by using the ErrorBoundary component. You can create an ErrorBoundary to catch errors in the lazy-loaded component and display a fallback UI.

Can I use React.lazy with hooks?

Yes, you can use React.lazy with hooks. Just ensure that the lazy-loaded component is used within a functional component that can utilize hooks.

Are there any performance benefits to using React.lazy?

Yes, using React.lazy can improve performance by reducing the initial bundle size, as components are loaded only when needed.