You may have come across the term- “lazy loading in React”, but most of you won’t be familiar with exactly what is lazy loading in React. Lazy loading is not a new concept. It has been available for quite some time. In essence, lazy loading means that a component or a part of code must get loaded when it is required. It is also referred to as code splitting and data fetching. Now, the next question is, how to do lazy loading in react?
Talking about React specifically, it bundles the complete code and deploys all of it at the same time. Now, usually, that's not a bad idea, since React SPAs (Single page application) are quite small and do not affect the performance. But what if we have a gigantic application, like a content management system with a customer portal, admin portal etc. In such a case, it does not seem like a smart idea to load the complete application.
In this post, I will try to explain the advantages of lazy loading in react and how to implement it in React.
In situations where we know that certain code/features will not be accessible to all the users or the user does not access it frequently, it is best to load them when the user requests for it. This improves user experience as well as initial loading time.
\nFor example, let's consider that our application has two sections, A and B. Size of A is 1 MB and its loading time is approximately 1 second. Size of B is also 1 MB and so its loading time is also 1 second. And we know that a user will access either of the sections, or a user accessing section A will rarely access section B and vice versa. If we were to load the complete application at the starting of our application, it would cost the user 2 MB of data and the loading time will also be 2 seconds. The user might not like to wait for 2 seconds or won't be happy that a site is costing them a lot of data. This can be improved and halved with proper lazy loading through lazy load react components.
\n\nNote: This is not the general case. Small single-page applications are usually in kbs.
\n
To follow this tutorial, you’ll need the following:
\ncreate-react-app tool
npm install -g create-react-appFirst of all, create the app using npm create-react-app
npm create-react-app my-appNow run the app by running following command in the project directory root
\nnpm starthttp://localhost:3000Let the directory structure be
\n|\n|-src\n|\t|-components\n|\t|\t|-Admin.js\n|\t|\t|-Customer.js\n|\t|\t|-Home.js\n|\t|-app.js\n|-index.jsapp.js which will have an input field. We will pass the input received as props to Home, and render Home.js. Based on props received, we will either render Admin or Customer.React 16.6+)From React 16.6+, react added React Suspense which performs lazy loading.
\nIn our Home.js, we will lazy load Admin and Customer
import React, { Suspense } from "react";\nconst Customer = React.lazy(() => import("./Customer.js"));\nconst Admin = React.lazy(() => import("./Admin.js"));\n\n//Instead of regular import statements, we will use the above approach for lazy loading\n\nexport default (props) => {\n\tif (props.user === "admin") {\n\t\treturn (\n\t\t\t// fallback component is rendered until our main component is loaded\n\t\t\t<Suspense fallback={<div>Loading</div>}>\n\t\t\t\t<Admin />\n\t\t\t</Suspense>\n\t\t);\n\t} else if (props.user === "customer") {\n\t\treturn (\n\t\t\t<Suspense fallback={<div>Loading</div>}>\n\t\t\t\t<Customer />\n\t\t\t</Suspense>\n\t\t);\n\t} else {\n\t\treturn <div> Invalid User </div>;\n\t}\n};When talking about react lazy loading, if you are working with React version prior to 16.6, you won't have the Suspense component. It is best to upgrade to the latest version and use Suspense. If you're not able to upgrade and still want this feature, it is still possible to create your own React Suspense component. I will be using Higher Order Component(HOC).
\nOur HOC (lazyLoader.js)
const lazyLoader = (importComp) => {\n\treturn class extends React.Component {\n\t\tstate: {\n\t\t\tcomponent: null; //initializing state\n\t\t};\n\n\t\t//loading the component and setting it to state\n\t\tcomponentDidMount() {\n\t\t\timportComp().then((comp) => setState({ component: comp.default }));\n\t\t}\n\n\t\t//rendering the component\n\t\trender() {\n\t\t\tconst C = this.state.component;\n\t\t\treturn C ? <C {...this.props} /> : null;\n\t\t}\n\t};\n};\nexport default lazyLoader;Our calling component, in this case Home.js
import React from "react";\nimport { lazyLoader } from "./lazyLoader";\n\nconst Customer = lazyLoader(() => import("./Customer.js"));\nconst Admin = lazyLoader(() => import("./Admin.js"));\n\n//Instead of regular import statements, we will use the above approach for lazy loading\n\nexport default (props) => {\n\tif (props.user === "admin") {\n\t\treturn <Admin />;\n\t} else if (props.user === "customer") {\n\t\treturn <Customer />;\n\t} else {\n\t\treturn <div> Invalid User </div>;\n\t}\n};This was all about how to implement lazy loading in react, if you need the fallback feature, you can update HOC's render method where it is returning null. Instead of null, you can return your fallback component, and it can be passed as props too.
\nNow our HOC would look like -
\nconst lazyLoader = (importComp, fallback) => {\n\treturn class extends React.Component {\n\t\tstate = {\n\t\t\tcomponent: null, //initializing state\n\t\t};\n\n\t\t//loading the component and setting it to state\n\t\tcomponentDidMount() {\n\t\t\timportComp().then((comp) => setState({ component: comp.default }));\n\t\t}\n\n\t\t//rendering the component\n\t\trender() {\n\t\t\tconst C = this.state.component;\n\t\t\treturn C ? (\n\t\t\t\t<C {...this.props} />\n\t\t\t) : fallback ? (\n\t\t\t\tfallback\n\t\t\t) : (\n\t\t\t\t<div>loading</div>\n\t\t\t);\n\t\t\t// If component is not loaded then return fallback component, if fallback is not provided then use default loading\n\t\t}\n\t};\n};\nexport default lazyLoader;