Lazy loading in React

Lazy loading in React

In this post, I will try to explain the advantages of lazy loading and how to implement it 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.

Overview

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.

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.

  • It will be a huge application and will cost a lot of unnecessary data transfer which can lead to slow loading of the website.
  • A customer login, will not have access to admin specific features, so loading it is a waste of memory and time.

In this post, I will try to explain the advantages of lazy loading and how to implement it in React.

Advantages

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.

For 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.

react lazy loading react suspense

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

How native is React Native? | React Native vs Native App Development

Article covers: How native is react native?, React Native vs (Ionic, Cordova), Similarities and difference between React Native and Native App Development.

10 Best React Loading Component for Your App

If you are unable to shorten the process, you should at least try to make the wait pleasant for your users. Here are 10 react loading components for your react.js application

React Lazy Loading with Suspense - Concurrent React Mode

Lazy Loading React Components (with react.lazy and suspense). React dynamic import, splitting the bundle and loading it using React.lazy and suspense - Concurrent React Mode. Code-splitting your app can help you “lazy-load” just the things that are currently needed by the user, which can dramatically improve the performance of your app.

Lazy Loading Images in React for Better Performance

In some cases, we need to load a list that contains a lot of images on a single page. Most of the images not even visible on the screen when it is loaded. We need to scroll down to see them. By default, when we open the page, the browser would load and request all the images on the page regardless if it’s visible on the viewport or not.

React suspense | lazy loading | code splitting

React dynamic import , splitting the bundle and loading it using React.lazy and suspense.