React Code Splitting Interview Guide

What is Code Splitting?

Code Splitting is a technique used to split a large JavaScript bundle into smaller chunks that can be loaded on demand.

Benefits

Faster initial page load
Reduced bundle size
Better performance
Improved user experience

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

Why is Code Splitting Important?

Without code splitting:

The entire application bundle is downloaded during startup.

With code splitting:

Only the required code is loaded initially.
Remaining code is downloaded only when needed.

Example:

Login page loads only login-related code.
Dashboard code loads after login.

Ways to Implement Code Splitting

React.lazy()
Suspense
Route-based splitting
Dynamic imports
Webpack/Vite code splitting

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

React.lazy()

React.lazy() allows React components to be loaded dynamically.

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

The component is downloaded only when it is rendered.

Why Suspense is Required

Since lazy-loaded components load asynchronously, React needs a fallback UI.

<Suspense fallback={<div>Loading...</div>}>
    <Profile />
</Suspense>

Without Suspense, React throws an error.

Components Suitable for Lazy Loading

Avoid

Header
Navbar
Footer
Frequently used shared components

Lazy loading small, frequently rendered components adds network overhead without a meaningful bundle-size benefit.

Route-Based Code Splitting

Each route loads only when the user navigates to it.

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

<Route path="/dashboard" element={<Dashboard />} />
<Route path="/settings" element={<Settings />} />

This is the most common enterprise approach.

Dynamic Imports

Dynamic imports load modules at runtime.

import('./utils')
  .then(module => {
      module.calculate();
  });

Static import:

import { calculate } from './utils';

Dynamic imports automatically create separate chunks.

Lazy Loading vs Code Splitting

Lazy Loading	Code Splitting
Loads code when needed	Splits bundle into chunks
Runtime behavior	Build-time optimization
Uses React.lazy	Uses Webpack/Vite

Interview Answer: Code splitting creates chunks, while lazy loading loads those chunks only when required.

Internal Flow of React.lazy()

flowchart LR
A[Application Starts] --> B[React.lazy Component Referenced]
B --> C[Separate JS Chunk Requested]
C --> D[Suspense Shows Fallback]
D --> E[Chunk Download Completes]
E --> F[Component Renders]

Internally:

Bundler creates a separate JS chunk.
Component is excluded from the main bundle.
Browser downloads the chunk on demand.
Suspense displays fallback UI.
Component renders after download.

Handling Errors

Use an Error Boundary to catch chunk-loading failures (e.g., network errors) that Suspense alone does not handle:

class ErrorBoundary extends React.Component {
  state = { hasError: false };

  static getDerivedStateFromError() {
    return { hasError: true };
  }

  render() {
    if (this.state.hasError) {
      return <h1>Something went wrong.</h1>;
    }
    return this.props.children;
  }
}

<ErrorBoundary>
   <Suspense fallback={<Loader />}>
      <Dashboard />
   </Suspense>
</ErrorBoundary>

Named Exports

React.lazy() expects a default export.

Incorrect:

export const Dashboard = () => {};

Correct:

export default Dashboard;

Alternative:

const Dashboard = React.lazy(() =>
  import('./Dashboard').then(module => ({
    default: module.Dashboard
  }))
);

Chunking

Chunking means breaking a large bundle into multiple smaller bundles.

main.js
vendor.js
dashboard.js
profile.js

Benefits:

Parallel downloads
Browser caching
Faster loading

Webpack Code Splitting

Webpack creates chunks automatically for dynamic imports.

import('./Dashboard');

Output:

main.bundle.js
dashboard.chunk.js

Vendor Splitting

Separate third-party libraries from application code.

vendor.js
  react
  react-dom
  axios

app.js
  business code

Benefits:

Better browser caching
Smaller deployments

Bundle Analysis

Common tools:

Webpack Bundle Analyzer
Source Map Explorer
Lighthouse

npm install webpack-bundle-analyzer

Limitations

Works only with default exports
Primarily intended for client-side rendering
Requires Suspense
Requires Error Boundaries for graceful error handling
First load may be slower due to network requests

Senior-Level Interview Questions

When should you NOT use React.lazy()?

Avoid using it for:

Frequently used components
Critical above-the-fold UI
Small reusable components

Bad:

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

Good:

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

Optimizing Large React Applications

Recommended strategies:

Route-level splitting
Vendor splitting
Lazy load heavy chart libraries
Lazy load admin modules
Prefetch important chunks
Use browser caching