Lazy loading is a technique used to defer the loading of components or resources until they are needed, which can significantly improve the performance and user experience of a React application.
Lazy loading helps reduce the initial load time of your application by splitting the code into smaller chunks that can be loaded on demand. This is especially useful for large applications with many routes or heavy components.
Lazy loading can improve the performance of your React application by loading components only when they are needed, reducing the initial bundle size.
React provides a built-in function React.lazy to handle lazy loading of components. It works together with the Suspense component to display a fallback while the lazy-loaded component is being fetched.
To implement lazy loading in React, follow these steps:
First, import the Suspense and lazy components from React.
import { Suspense, lazy } from 'react';
Create a variable that lazily loads the component file.
const Home = lazy(() => import('./Home'));
Wrap the lazy-loaded component with the Suspense component and provide a fallback to display while the component is loading.
<Suspense fallback={'Loading....'}>
<Home />
</Suspense>
The fallback prop in the Suspense component can be any React element that you want to display while the lazy-loaded component is being fetched.
Now, when the Home component is being loaded, the fallback content ("Loading...") will be displayed. Once the Home component is fully loaded, it will be rendered in place of the fallback.
Here's a complete example of how to use lazy loading in a React application:
import React, { Suspense, lazy } from 'react';
const Home = lazy(() => import('./Home'));
const App = () => {
return (
<div>
<h1>Lazy Loading Example</h1>
<Suspense fallback={<div>Loading...</div>}>
<Home />
</Suspense>
</div>
);
};
export default App;
Using lazy loading for routes can be especially beneficial for applications with many routes, as it ensures that only the code necessary for the current route is loaded.
Lazy loading is particularly useful for routes in a React application. You can lazy load route components to ensure that only the necessary code is loaded for the current route.
import React, { Suspense } from 'react';
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
// Lazy load route components
const Home = React.lazy(() => import('./Home'));
const About = React.lazy(() => import('./About'));
const Contact = React.lazy(() => import('./Contact'));
const App = () => {
return (
<Router>
<Suspense fallback={<div>Loading...</div>}>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/about" element={<About />} />
<Route path="/contact" element={<Contact />} />
</Routes>
</Suspense>
</Router>
);
};
export default App;
Using lazy loading for routes can be especially beneficial for applications with many routes, as it ensures that only the code necessary for the current route is loaded.
Lazy loading for routes can be beneficial for applications but always wrap your lazy loaded components with an ErrorBoundary to handle any potential errors during the loading phase gracefully. Read More
Lazy loading is a powerful technique for optimizing React applications, especially those with large codebases or multiple routes. By loading components only when needed, you can significantly improve the performance and user experience of your application.
Objective: Implement lazy loading in a sample React application.
Create a Stateful Component:
Create a new file LazyComponent.jsx and define a simple component.
const LazyComponent = () => {
return (
<div>
<h1>This is a lazy loaded component!</h1>
</div>
);
};
export default LazyComponent;
Implement Lazy Loading in App:
Update your App.jsx to lazy load the LazyComponent.
import React, { Suspense, lazy } from 'react';
const LazyComponent = lazy(() => import('./LazyComponent'));
const App = () => {
return (
<div>
<h1>Lazy Loading Example</h1>
<Suspense fallback={<div>Loading...</div>}>
<LazyComponent />
</Suspense>
</div>
);
};
export default App;
Lazy Load Routes:
Implement lazy loading for route components in your React Router setup.
import React, { Suspense, lazy } from 'react';
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
const Home = lazy(() => import('./Home'));
const About = lazy(() => import('./About'));
const App = () => {
return (
<Router>
<Suspense fallback={<div>Loading...</div>}>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/about" element={<About />} />
</Routes>
</Suspense>
</Router>
);
};
export default App;
By completing this task, you'll gain hands-on experience in implementing lazy loading in React applications.