Dynamic import in React: implementation and benefits

Today's applications are getting bigger and richer in functionality, but they are still loaded in their entirety immediately. This translates into a longer period of time during which the user sees a white page or a loader. This is especially inconvenient when someone has a poor internet connection, for example while traveling.

Dynamic import helps reduce this problem by loading specific parts of the application only when they are really needed. In the context of programming, this means that the application is divided into parts, so-called chunks, which are downloaded dynamically on user request, for example when navigating to one of the application's subpages.

In this article, I will show you how to implement dynamic module loading in React and present more business benefits that can be achieved with this solution.

Why dynamic import is important

The longer an app is developed, the larger its package size becomes. We can say that with each passing day, additional milliseconds will be needed to download it.

For the user, this can translate to:

• delays in navigating the application interface
• frustration when a white page or loader is repeatedly displayed
• closing the application before it has a chance to start

In turn, these inefficiencies can negatively impact conversions for a website or app, by surpassing the acceptable times of basic performance metrics, such as:

• First Contentful Paint (FCP) - the time it takes a user to see the first text or image
• Time To Interactive (TTI) - the time it takes for a page to be fully interactive
• Total Blocking Time (TBT) - the total time of all tasks lasting more than 50ms between FCP and TTI, during which the page does not respond to events such as a mouse click

Dynamic module loading allows you to optimize your applications by reducing the time of the above indicators, resulting in a much smoother user experience. 

Dynamic import in React

There are two types of importing modules in JavaScript: 

• static import - such imports are resolved during compilation, which causes all modules to fall into one output package
• dynamic import - such imports are loaded only when we need them. They are loaded only in run time on demand

For the purposes of an example, let's imagine that a user opens an application modal by pressing a button. To use the dynamic import mechanism, you need to use React.lazy() (line 4 in the code below) and the Suspense component (lines 22-24 in the code below).

How it works:

• React.lazy() takes as an argument a function that imports a given module. In this case, it is LazyModal.
• The Suspense component takes as a fallback prop, element which should be displayed when the module is loaded. It receives the LazyModal as children prop.
• When the user clicks the button that opens the modal, the module will be dynamically loaded

Dynamic module loading vs no dynamic module loading

Okay, but what does it look like in the network tab in Google Chrome? In the gif below you can see that clicking the button downloads the next chunk.

For comparison, below is a gif that shows an analogous situation, but without using dynamic module loading. The LazyModal component is imported in the usual, static way, i.e. by import LazyModal from ‘./LazyModal’. As you can see, clicking the button does not cause an additional request to appear in the network tab.

This means that the LazyModal component is in the main (the only one) chunk of our application.

Where to use dynamic module loading

There are a lot of different scenarios where your new application could benefit from dynamic module loading. These include:

• rarely visited subpages (we can identify them by using analytical tools)
• functionalities that can take up a lot of space but are only used in one place (e.g. a dashboard with charts that are displayed using external libraries)
• conditional display components (modals, widgets)
• functionalities that depend on user permissions
• general multimedia components that contain various animations (e.g. animations using Three.js, as long as they are not the basis of our application)

This is just a handful of examples. It is definitely worth it to carry out a thorough analysis of the application we are creating, as well as its functionalities. Such analysis may indicate that, for instance, in our specific case, components with animations are so important that they must be displayed immediately. 

The best answer to the question of when to use dynamic module loading is therefore: "it depends".

Dynamic import in React

Dynamic module loading is an incredibly useful feature that can help businesses to unlock a number of benefits. 

Reducing the weight of the main chunk of our application, allows for faster application loading times, which significantly impacts the user experience. 

Additionally, it translates into improved performance and SEO KPIs, including FCP, TTI and TBT.

If you have any questions about dynamic import in react, feel free to reach out to me at lukasz.stefanski@rst.com.pl