ReactJS
Lazy Loading in ReactJS
Introduction
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's Lazy Loading (with React.lazy and Suspense)
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 componentconst 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;Conclusion
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.
ReactJS