React Lazy and Suspense Explained — Dynamic Imports

In this tutorial, you will learn about React Lazy and Suspense Explained. We cover key concepts, practical examples, and best practices to help you master this topic.

React.lazy enables dynamic import of components, and Suspense provides fallback UI while they load, enabling seamless code-splitting with minimal configuration.

What You'll Learn

• How React.lazy works with dynamic imports
• How to handle loading states with Suspense
• How to preload lazy components
• How to handle errors with error boundaries
• Advanced patterns for Lazy Loading

Why It Matters

React.lazy is the simplest way to add code-splitting to your app. Components are loaded on demand with a declarative loading state, reducing initial bundle size without complex configuration.

import { lazy, Suspense, startTransition } from "react";

const HeavyChart = lazy(() => import("./HeavyChart"));

function Dashboard() {
  const [showChart, setShowChart] = useState(false);

  const preload = () => {
    const HeavyChartPromise = import("./HeavyChart"); // Start loading early
  };

  return (
    <div>
      <button
        onMouseEnter={preload} // Preload on hover
        onClick={() => {
          startTransition(() => setShowChart(true));
        }}
      >
        Show Chart
      </button>
      {showChart && (
        <Suspense fallback={<div className="skeleton" style={{ height: 400 }} />}>
          <HeavyChart />
        </Suspense>
      )}
    </div>
  );
}

Expected output: The HeavyChart component loads when clicked, with preloading starting on hover. A skeleton placeholder shows during loading.