Moderate Performance Question 110 of 229

How does code splitting work with React.lazy?

Frontend Master · Speak this in 60–90 seconds · Faridabad & Delhi NCR

State changesetState / hook

ReconcileVirtual DOM diff

CommitUpdate real DOM

React.lazy plus dynamic import creates a separate chunk loaded when the component first renders.

Why interviewers care about Performance:

This is a process

question about Performance.

Panels listen for order,

trade-offs, and what you would actually do on a Frontend project - not buzzwords.

Stay structured

Name the idea, why it exists, then one short example.

Close cleanly

End with when you use it and one common pitfall.

Before you speak the answer, walk the interviewer through these steps:

1
React.lazy plus dynamic import
creates a separate chunk loaded when the component first renders.
2
I wrap it in
Suspense with a fallback.
3
I split route-level pages
first, not every tiny button.
4
Give an example
One tiny concrete case you can say aloud.
5
Common mistake
What juniors usually get wrong.
6
Close
When you pick this over the alternative.

Here's a short line you can speak, broken into clear beats:

Say this line

“I wrap it in Suspense with a fallback.”

Break into beats

IwrapitinSuspensewith

Speaking order

2987408337471632900

Note: Adapt this scaffold to your own project — keep it under 60–90 seconds.

React.lazy plus dynamic import creates a separate chunk loaded when the component first renders. I wrap it in Suspense with a fallback.