What is Code Splitting in React?
Learn what code splitting in React is, how React.lazy, dynamic import and Suspense shrink your bundle, boost load speed, and improve Core Web Vitals.
Expected Interview Answer
Code splitting is a technique that breaks your React JavaScript bundle into smaller chunks that load on demand, so users download only the code needed for the current view instead of the entire app upfront.
In React it is usually done with React.lazy() and dynamic import(), wrapped in a <Suspense> boundary that shows a fallback while the chunk downloads. Bundlers like Webpack, Vite, or Rspack create a separate file per dynamic import, most commonly split by route so each page loads its own chunk. This shrinks the initial bundle, which improves Time to Interactive and Largest Contentful Paint.
- Smaller initial bundle and faster first load
- Loads route or feature code only when needed
- Better Core Web Vitals (LCP, TTI, INP)
- Lower memory and parse cost on low-end devices
- Caches unchanged chunks independently between deploys
AI Mentor Explanation
Instead of handing every spectator the full statistics of all 15 squad members before a match starts, the broadcaster shows a batter's detailed record only when that player walks out to bat. Code splitting works the same way — React loads a component's code at the exact moment it is needed on screen, not all of it up front, keeping the opening load light and quick.
Step-by-Step Explanation
Step 1
Identify split points
Start with routes, then large or rarely used components like modals, editors, and charts.
Step 2
Convert to dynamic import
Wrap the component with React.lazy(() => import('./Component')) so the bundler emits a separate chunk.
Step 3
Add a Suspense boundary
Render the lazy component inside <Suspense fallback={...}> so a fallback shows while the chunk downloads.
Step 4
Handle load errors
Wrap Suspense in an error boundary to catch failed chunk requests and offer a retry.
Step 5
Verify the chunks
Inspect the build output or Network tab to confirm each split point produces its own file that loads on demand.
What Interviewer Expects
- Understanding of bundle size and its performance impact
- Familiarity with React.lazy and dynamic import()
- Knowing why Suspense and a fallback are required
- Route-based versus component-based splitting trade-offs
- Awareness of error boundaries for failed chunk loads
Common Mistakes
- Forgetting the Suspense boundary around a lazy component
- Splitting so aggressively that many tiny chunks hurt performance
- Not handling network failures when a chunk fails to download
- Lazy-loading above-the-fold content and causing layout shift
- Assuming code splitting reduces total code rather than initial load
Best Answer (HR Friendly)
“Code splitting means the app loads only the code needed for what the user is looking at right now, instead of downloading everything at once. This makes the first screen appear much faster and improves the overall experience, especially on slower phones and networks.”
Code Example
import { lazy, Suspense } from 'react'
import { Routes, Route } from 'react-router-dom'
const Dashboard = lazy(() => import('./pages/Dashboard'))
const Settings = lazy(() => import('./pages/Settings'))
function App() {
return (
<Suspense fallback={<div>Loading…</div>}>
<Routes>
<Route path="/dashboard" element={<Dashboard />} />
<Route path="/settings" element={<Settings />} />
</Routes>
</Suspense>
)
}
export default AppFollow-up Questions
- How does React.lazy differ from a plain dynamic import()?
- Why is a Suspense boundary required for lazy components?
- How would you handle a chunk that fails to load?
- What is the difference between route-based and component-based splitting?
- How does code splitting interact with server-side rendering?
MCQ Practice
1. Which React API is used to lazily load a component as a separate chunk?
React.lazy takes a function returning a dynamic import() and renders the component from a separately loaded chunk.
2. Why must a lazily loaded component be wrapped in <Suspense>?
Suspense provides the fallback UI that renders while the component's chunk is still being fetched.
3. What is the most common granularity for the first code split in a React app?
Route-based splitting is the usual starting point because each page becomes its own chunk loaded on navigation.
Flash Cards
What is code splitting? — Breaking the JS bundle into chunks that load on demand so the initial load is smaller and faster.
Which API creates a lazy component? — React.lazy(() => import('./Component')), which loads the module as a separate chunk.
Why is Suspense needed? — It renders a fallback UI while the lazy component's chunk is downloading.
What is the most common split boundary? — The route — each page becomes its own chunk loaded when the user navigates to it.