Lazy Loading in ReactJS

React lazy loading enhances performance by loading components when required and not when the application is in the process of loading. This reduces the bundle size and makes the initial app render faster.

React employs a simple approach to lazy loading via React.lazy() and Suspense.

Example: Lazy Loading a Component

Lazy load the component using React.lazy:

import React, { Suspense, lazy } from 'react';
// Lazy load the component
const LazyComponent = lazy(() => import('./LazyComponent'));
const App = () => {
return (
<div>
<h1>My App</h1>
{/* Suspense wraps the lazy component and shows fallback while loading */}
<Suspense fallback={<div>Loading...</div>}>
<LazyComponent />
</Suspense>
</div>
);
};
export default App;
The LazyComponent.tsx:
React.lazy(() => import('./LazyComponent')) dynamically imports the component.
<Suspense fallback={<div>Loading...</div>}> shows a fallback while the component loads.
const LazyComponent = () => {
return <div>I am a lazy-loaded component!</div>;
};
export default LazyComponent;

React lazy loading is a high-level optimization technique that improves the performance of an app by reducing the initial loading time. This has the following benefits:

• Reduced initial page loading

• Dynamic loading and improved user experience

• Less resource usage and smaller bundle sizes

Intelligent use of lazy loading makes your React apps quick, scalable, and user-friendly.

Ready to transform your business with our technology solutions? Contact Us today to Leverage Our ReactJS Expertise.