How do React.lazy and Suspense enable code-splitting and loading states?

Explanation & Concept

`React.lazy` dynamically imports components only when they are rendered, splitting them into separate bundle chunks. `Suspense` wraps lazy components to specify a fallback UI (like a loading spinner) while the bundle is loaded over the network.

Code Example

javascript

import { lazy, Suspense } from "react";

// Lazily load heavy charting library component
const HeavyAnalyticsChart = lazy(() => import("./HeavyAnalyticsChart"));

export function Dashboard() {
  return (
    <div>
      <h1>Dashboard Overview</h1>
      <Suspense fallback={<div className="animate-pulse">Loading chart...</div>}>
        <HeavyAnalyticsChart />
      </Suspense>
    </div>
  );
}

How It Works & Key Takeaways

Code splitting prevents heavy analytics or charting bundles from delaying the initial page load for first-time visitors.

Mock Test · 1 Questions · Optional

Ready for State Lifting?

Take a quick test to evaluate yourself, or move straight to the next module.

Advanced1 questions

Skip

Suspense & Lazy LoadingAdvanced

1Question 1 of 1

javascript

How do React.lazy and Suspense enable code-splitting and loading states?

Explanation & Concept

Code Example

javascript

import { lazy, Suspense } from "react";

// Lazily load heavy charting library component
const HeavyAnalyticsChart = lazy(() => import("./HeavyAnalyticsChart"));

export function Dashboard() {
  return (
    <div>
      <h1>Dashboard Overview</h1>
      <Suspense fallback={<div className="animate-pulse">Loading chart...</div>}>
        <HeavyAnalyticsChart />
      </Suspense>
    </div>
  );
}

How It Works & Key Takeaways

Code splitting prevents heavy analytics or charting bundles from delaying the initial page load for first-time visitors.

Mock Test · 1 Questions · Optional

Ready for State Lifting?

Take a quick test to evaluate yourself, or move straight to the next module.

Advanced1 questions

Skip