Lazy loading is used for the optimization of the application. As the application size increases, we create more components in our app, leading to a more extensive application bundle size.
As the bundle size of our application increases, the application takes more time to load which reduces the performance and is a sign of a bad user experience.
In this tutorial, we will look at how to implement lazy loading in React with the help of React.Lazy() and React.suspense methods that will increase the application performance and build a better user experience.
What is React.lazy()?
React.lazy() is a feature introduced by React in v16.6 which helps us to load our components lazily with code splitting. Before React v16.6 third-party libraries such as react-loadable were used for lazy loading the components.
Let’s understand what code splitting means. As you can guess by the name, code splitting splits our large bundle of code into multiple bundles which can be loaded dynamically.
Most React apps will have their files “bundled” using tools like Webpack, Rollup, or Browserify. Bundling is the process of following imported files and merging them into a single file: a “bundle”. This bundle can then be included on a webpage to load an entire app at once.
React documentation.
When you’re using any application/website there’s a high chance you will never have a need for some components. So rendering the components which will not be used by the user makes no sense. With the help of lazy loading, you first load critical items on the page which are important (will be viewed first when a user visits the page) and then silently load the other items.
This speeds up the page load time as it avoids downloading the resources before time.
Enough talking, let’s code.
React.lazy() in action
Start by creating react app or simply open react.new in your browser.
React has two features that make it easier to lazy load the components. React.lazy() and React.suspense.
React.lazy() takes in a function that returns a promise to load the required component with import().
// App.js
import React from "react";
const LazyComponent = React.lazy(() => import("./Components/LazyComponent"));
const App = () => {
return (
<div>
</div>
);
};
export default App;React.suspense
Suspense is a component that is used to wrap lazy components. As our lazy components are displayed only when they are required to be rendered. We need to indicate that our component is being rendered.
React.suspense wraps our lazy component. We can use multiple lazy components inside our Suspense. The Suspense component takes React element as a prop to display information while the lazy component is loading.
// App.js
import React, { Suspense } from "react";
const LazyComponent = React.lazy(() => import("./Components/LazyComponent"));
const App = () => {
return (
<div>
<Suspense fallback={<div>Loading...</div>}>
</div>
);
};
export default App;Lazy loading routes
We can also perform route-based code splitting with the help of React.lazy() and React.suspense.
We can do this by converting route components to lazy components and wrapping them with React.suspense.
// App.js
import React, { Suspense } from "react";
import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
const LazyComponent = React.lazy(() => import("./Components/LazyComponent"));
const App = () => {
return (
<Suspense fallback={<h1>Loading...</h1>}>
<Route path="/" element={} />
);
};
export default App;Conclusion
After the launch of React.lazy() method we can now lazy load our components without using any third-party libraries. React.lazy() and React.suspense has made it easier to improve the performance of the React app.
Thank you for reading.
Feel free to comment if you have any questions or If you have suggestions. If you want to request any article for a particular topic contact through the about page. I would love to hear from you.
💬 Leave a comment