What is code splitting with React.lazy and Suspense?
Quick answer
React.lazy loads a component's code only when it's first rendered; Suspense shows a fallback while it loads. This shrinks the initial bundle.
In detail
Instead of shipping the whole app up front, lazy() dynamically imports a component, and Suspense renders a fallback (spinner/skeleton) until the chunk arrives. It's typically applied per route so each page is a separate chunk, improving first load. Pair Suspense with an error boundary to handle load failures.
const Dashboard = lazy(() => import('./Dashboard'));
<Suspense fallback={<Spinner />}>
<Dashboard />
</Suspense>Why interviewers ask this: Tests practical bundle/performance knowledge.
Common follow-up questions
- →How would you lazy-load routes?
This is 1 of 118+ questions in the React Interview Kit
Get every question with detailed answers, follow-ups and real code — plus coding challenges and a last-minute revision sheet. One-time payment, instant access.
⚡ Get the React Interview Kit → ₹399