Dynamically Loading React Components with Hooks

Dynamic component loading and on-demand component loading can help improve maintenance and performance. We provide an overview of these techniques.

Dynamic Component Loading

Dynamic component loading is a technique that can replace writing import statements for many components. Instead of declaring every possible component that can be used, you can use a dynamic value for the path of a component. You can also use lazy loading to provide the end user with exactly the code bundle they need. A smaller bundle size for the end user should result in performance improvements. React 16.6.0+ provides React.lazy and React.Suspense to support lazy loading of React components. Instead of importing all components, lazy loading allows you to import only additional components when they are needed. In this article, you will explore the concepts of dynamic component loading and on-demand component loading.

Prerequisites

To complete this tutorial, you will need:

• An understanding of JavaScript variables and functions. You can read the “How To Code in JavaScript” series for more in-depth knowledge.
• An understanding of importing, exporting, and rendering React components. You can read our “How To Code in React.js” series for more in-depth coverage. No local development is required. CodeSandbox examples are available for further experimentation.

Dynamic Component Loading

Suppose you are developing an application that displays views for three subreddits: r/reactjs, r/learnreactjs, and r/javascript. Depending on the subredditsToShow property, a different component is displayed. Here is an example of such an application:

import React from 'react';
import shortid from 'shortid';

import LearnReactView from './views/learnreactView';
import ReactView from './views/reactView';
import JavaScriptView from './views/javascriptView';
import NullView from './views/NullView';

export default function App({ subredditsToShow }) {
  // Code to display subreddit views
}

import React, { lazy, useEffect, useState } from 'react';
import shortid from 'shortid';

const importView = subreddit =>
  lazy(() =>
    import(`./views/${subreddit}View`).catch(() =>
      import(`./views/NullView`)
    )
  );

export default function App({ subredditsToShow }) {
  // Code for dynamic component loading
}

Loading Components on Demand

In the previous examples, you loaded components automatically without any performance improvement. You can improve performance by sending JavaScript only when it is needed, when a user performs an action. Suppose you need to display different types of charts for the following data:

const data = [
  {
    id: 'php',
    label: 'php',
    value: 372,
    color: 'hsl(233, 70%, 50%)'
  },
  // More data records...
];

import React, { lazy, useState } from 'react';
import shortid from 'shortid';

const importView = chartName =>
  lazy(() =>
    import(`./charts/${chartName}`)
      .catch(() => import(`./charts/NullChart`))
  );

const data = [ ... ];

export default function App() {
  // Code for loading components on demand
}