Code splitting

React.lazy and dynamic import() load a component's code only when it is first rendered, so the initial bundle stays small. Suspense shows a fallback while the chunk loads.

What a session covers

The tutor works through these with you, in conversation and code. A session ends when you have shown them, not when a video does.

Explain what React.lazy and dynamic import do to the bundle
Split a route and show a Suspense fallback while it loads
Spot the over-splitting that makes spinners flicker

In practice

A few lines that show Code splitting doing its job.

TSX

const ReportEditor = React.lazy(() => import("./ReportEditor"));

function Reports() {
  return (
    <Suspense fallback={<Spinner />}>
      <ReportEditor />
    </Suspense>
  );
}

The common mistake

Watch for

Splitting at every component. Dozens of tiny chunks each cost a round trip, and the spinners flicker. Split along routes and genuinely heavy features.

What to know first

Your roadmap puts these before Code splitting, unless you already know them.

Routes and links

How it stays learned

Once a session shows you understand Code splitting, it comes back for review. Each review takes a minute and tells the memory model how well you still know it.

Day 3First recall, while it is fresh
Day 7Second, a week on
Day 18Last, when it has settled

Previous in the module← Memoisation

Next in the moduleProfiling renders →