Lazy loading React components
What is lazy loading?
The Lazy loading is a one of the design pattern for optimizing mobile applications and web applications. The lazy loading means : initialize objects that are critical to the user interface first and quietly render non-critical items later.
When you visit a website or use an apps, itis very likely you’re not seeing all the available content. Depending on how you navigate and use the apps, you may not at all encounter the need for certain components, and loading unneeded items costs time, computing resources. Lazy loading enables you to render elements on demand and making your apps more efficient and improving the user experience.
How to use lazy loading in React
React has 2 features that make it very simple to apply code-splitting and lazy loading to React components: React.lazy() and React.Suspense.
The React.lazy() is a function that enables you to render a dynamic import as a regular react component. Dynamic imports are a way of code-splitting and which is central to lazy loading. A core feature as of React 16.6, React.lazy() eliminates the need to use a third-party library or package such as react-loadable.
The React.Suspense enables you to specify the loading indicator in the event that the react components, and in the tree below it’s not yet ready to render the components.
Before we see React.lazy and React.Suspense in action, let’s quickly review the concepts of code-splitting and dynamic imports in react ,and explain how they work, and break down how they facilitate lazy loading in React components.
Code-splitting in React
With the advent of ES modules and transpilers such as Babel, and bundlers such as webpack and Browserify. You can now write JS(JavaScript) applications in a completely modular pattern for easy maintainability. Usually, each and every module is imported, merged into a single file or component called a bundle, and then the bundle is included on a webpage to load the entire application. As the applications grows, the bundle size increases and eventually impacts pages load times also.
Code-splitting is the process of dividing a large bundle of code into multiple bundles(components) that can be loaded dynamically. This helps you avoid performance issues associated with oversized bundles without actually reducing the amount of code in your application.
Dynamic imports in React
One way to split the code is to use dynamic imports, and which leverage the import() syntax. Calling import() method to load a module relies on JS(JavaScript) Promises. Hence, it’s a promise that is fulfilled with the loaded module or rejected if the module can not be loaded.
Here is what it looks like to dynamically import a module for an application bundled with webpack:
When webpack sees this syntax, it knows to dynamically create a separate bundle file(components) for the moment library.
For React applications, code-splitting using dynamic import() method happens on the fly if you’re using a boilerplate such as create-react-app or Next.js. However, if you are using a custom webpack setup, and you should check the webpack guide for setting up code-splitting. For Babel transpiling, you need the babel-plugin-syntax-dynamic-import plugin to parse dynamic import() method correctly.
Using React.lazy()
The React.lazy() makes it simple to create components that are loaded using dynamic import() method but rendered like regular react components. This automatically causes the bundle or files containing the react component to load when the component is rendered.
The React.lazy() takes as its argument a function() that must return a promise by calling import() to load the react component. The returned promise resolves to a react module with a default export containing the React component.
