Optimizing React Applications with Code Splitting and Dynamic Imports

If you have been using React for a while, you may have heard the terms “code splitting” and “dynamic import”, especially when optimizing performance. These techniques can greatly improve the speed and efficiency of your React application. This article delves into how to leverage them.

Simple Review

Before we start, let’s quickly review three key concepts: bundling, code splitting, and dynamic import.

Bundling merges your React application’s JavaScript files into one or a few large files. While this simplifies loading in the browser, it can cause bundle bloat , i.e., loading excessive unused code early, which slows down the initial startup.

Code Splitting breaks your app into smaller, more manageable chunks, and Dynamic Imports can load those chunks on demand. Instead of loading an entire library or component up front, you load it only when needed.

Library and Module Import Optimization

Many React apps use both local modules and third‑party libraries such as lodash , moment.js , or UI component libraries like Material‑UI . With static imports, the entire library is bundled regardless of whether you use a single function or the whole package, leading to bundle bloat and slower first‑render speed.

Dynamic import allows you to load only the specific parts of a library you need. For example, instead of importing the whole utility library up front, you can load the sortBy function from Lodash only when required:

import React, { useState } from 'react';

function App() {
  const [data, setData] = useState([20, 10, 30, 50, 40]);

  const sortNumbers = async () => {
    // Dynamic import Lodash sortBy function
    const { sortBy } = await import('lodash');
    const sortedData = sortBy(data);
    setData(sortedData);
  };

  return (
Numbers: {data.join(', ')}
Sort Numbers
);
}

export default App;

Explanation

The app initially displays an unsorted list of numbers.

When the “Sort Numbers” button is clicked, Lodash’s sortBy function is dynamically imported and used to sort the array.

Before the button click, the Lodash library is not loaded, keeping the initial bundle size small and improving load speed.

This approach reduces the amount of code that needs to be downloaded on the first visit, significantly shortening the initial load time.

Conditional Component Import

In many applications, not all components need to be loaded on every page. For instance, a large admin dashboard component is unnecessary on a login page. Dynamic import lets you load components on demand based on user actions or specific conditions.

Below is an example that dynamically loads different dashboards (Admin, Manager, or User) based on the logged‑in role:

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

// Lazy‑load different dashboards
const AdminDashboard = lazy(() => import('./AdminDashboard'));
const ManagerDashboard = lazy(() => import('./ManagerDashboard'));
const UserDashboard = lazy(() => import('./UserDashboard'));

function App() {
  const [userRole, setUserRole] = useState(null);

  const handleLogin = (role) => {
    setUserRole(role);
  };

  const renderDashboard = () => {
    switch (userRole) {
      case 'admin':
        return
;
      case 'manager':
        return
;
      case 'user':
        return
;
      default:
        return
Please log in
;
    }
  };

  return (
{!userRole ? (
handleLogin('admin')}>Login as Admin
handleLogin('manager')}>Login as Manager
handleLogin('user')}>Login as User
) : (
Loading Dashboard...
}>
          {renderDashboard()}
)}
);
}

export default App;

Explanation

The user selects a role (admin, manager, or user) when logging in.

According to the chosen role, the corresponding dashboard component ( AdminDashboard , ManagerDashboard , or UserDashboard ) is dynamically imported.

Only the needed dashboard is loaded after login, keeping the initial bundle size small and loading code on demand.

Route Optimization

React single‑page applications (SPA) typically rely on routing libraries such as react-router-dom . In a typical setup, all routes and their associated components are loaded during app initialization, which makes the initial load unnecessarily heavy, especially when many routes exist.

With dynamic import, you can load a component only when the user navigates to its route:

import { lazy } from 'react';
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';

const Home = lazy(() => import('./Home'));
const About = lazy(() => import('./About'));

function App() {
  return (
Loading...
}>
} />
} />
);
}

export default App;

Explanation

The Home and About components are not loaded immediately.

When the user navigates to "/" or "/about", the corresponding component is dynamically loaded.

During the loading process, Suspense displays a placeholder (e.g., “Loading...”); once the component finishes loading, the placeholder is replaced with the actual content.

Summary

Dynamic import is not merely a “nice‑to‑have” feature—it's a key technique for any modern React application to achieve efficient scaling. By splitting code into smaller modules, you can significantly improve load speed and provide users with a smoother, more responsive experience.

For further learning, see the linked resources on React hooks, CSS tricks, and Vue techniques.