React Code Splitting & Lazy Loading — Complete Interview Guide

The Bundle Problem

Without code splitting, your bundler (webpack, Vite) combines every JavaScript file in your app into one large file. Every user downloads this bundle on their first visit — even if they only use 10% of the features. A user landing on the login page downloads all the code for the admin panel, the user profile, the analytics dashboard, and every other page they haven't visited yet.

Code splitting solves this by creating separate JavaScript chunks for different parts of the app, loaded on demand.

Dynamic import() — The Foundation

Before React.lazy, bundlers introduced import() as a dynamic version of the static import statement. It returns a Promise that resolves to the module:

// Static import — loaded immediately, part of the main bundle
import Dashboard from './Dashboard';

// Dynamic import — loaded on demand, creates a separate chunk
import('./Dashboard').then(module => {
  const Dashboard = module.default;
  render(<Dashboard />);
});

Bundlers automatically create a separate JavaScript file (chunk) for every dynamic import target. The chunk is only fetched when the import() call executes.

React.lazy — Declarative Lazy Loading

React.lazy wraps a dynamic import so you can use the lazily-loaded component just like any other React component. It must receive a function that returns a Promise resolving to a module with a default export:

// Without lazy — AdminPanel is in the main bundle
import AdminPanel from './AdminPanel';

// With lazy — AdminPanel becomes a separate chunk, loaded on demand
const AdminPanel = React.lazy(() => import('./AdminPanel'));

// Usage is identical — React handles the loading
function App() {
  return (
    <Suspense fallback={<Spinner />}>
      <AdminPanel />
    </Suspense>
  );
}

React.lazy only works with default exports. If the component is a named export, create an intermediate module that re-exports it as default, or use the workaround below.

Suspense — The Loading Boundary

Suspense is the boundary component that shows a fallback UI while a lazy component's chunk is downloading. It can wrap one or many lazy components — it shows the fallback if any child is still loading:

// One Suspense, multiple lazy children — fallback shows until ALL are ready
<Suspense fallback={<PageSkeleton />}>
  <LazyHeader />
  <LazyContent />
  <LazyFooter />
</Suspense>

// Nested Suspense — each section has its own loading state
<Suspense fallback={<HeaderSkeleton />}>
  <LazyHeader />
  <Suspense fallback={<ContentSkeleton />}>
    <LazyContent />
  </Suspense>
</Suspense>

Route-Based Splitting — Biggest Impact

The highest-ROI code splitting strategy is to split at the route level — each page becomes its own chunk. A user visiting /dashboard never downloads the code for /settings:

const Home      = React.lazy(() => import('./pages/Home'));
const Dashboard = React.lazy(() => import('./pages/Dashboard'));
const Settings  = React.lazy(() => import('./pages/Settings'));

function App() {
  return (
    <Suspense fallback={<PageLoader />}>
      <Routes>
        <Route path="/"          element={<Home />} />
        <Route path="/dashboard" element={<Dashboard />} />
        <Route path="/settings"  element={<Settings />} />
      </Routes>
    </Suspense>
  );
}

Error Boundaries + Lazy = Required Pairing

Lazy loading can fail — the network is unreliable, a deployment changed the chunk filename, or the user's browser is offline. Without an Error Boundary, a failed lazy load crashes the entire app. Always pair Suspense with an Error Boundary:

<ErrorBoundary fallback={<p>Failed to load. <button onClick={retry}>Retry</button></p>}>
  <Suspense fallback={<Spinner />}>
    <LazyComponent />
  </Suspense>
</ErrorBoundary>

Named Exports Workaround

React.lazy requires a default export. For components exported as named exports, create a re-export:

// ❌ Won't work — lazy requires default export
const { UserCard } = React.lazy(() => import('./components'));

// ✅ Option 1: Re-export as default in a wrapper file
// LazyUserCard.js
export { UserCard as default } from './components';

// Then use it
const UserCard = React.lazy(() => import('./LazyUserCard'));

// ✅ Option 2: Inline re-export in the lazy call
const UserCard = React.lazy(() =>
  import('./components').then(module => ({ default: module.UserCard }))
);

Preloading for Instant Feels

You can trigger a lazy component's chunk download before the user needs it — on hover, on route transition start, or after the initial page loads — so the chunk is already cached when it's needed:

const Dashboard = React.lazy(() => import('./Dashboard'));

// Preload on hover — by the time the user clicks, the chunk is cached
function NavLink() {
  function handleMouseEnter() {
    import('./Dashboard'); // triggers the download, React.lazy will use the cached result
  }
  return (
    <a href="/dashboard" onMouseEnter={handleMouseEnter}>Dashboard</a>
  );
}