React.lazy & Suspense — the 80kb nobody asked for — Visualize

React.lazy & Suspense — the 80kb nobody asked for

A download ledger proves it: 20kb first paint, and the chart chunk ships only when someone actually opens Reports.

💡

THE BIG IDEA

By default a bundler ships your WHOLE app before the first pixel — the login page pays for the admin charts. React.lazy cuts the bundle at chosen seams and loads each piece on first use; Suspense decides what the user sees during the wait. We run it with a download ledger: watch the first paint cost 20kb instead of 100, and the heavy chunk travel only when clicked for.

Move your mouse over any line to see what it does. Hover a loop line and it plays through every repeat. Or press ▶ Play to watch the whole thing. On a phone, tap the arrows.

1let downloaded = ["main.js (20kb)"];
2const lazyImport = (name, kb) => new Promise((resolve) =>
3  setTimeout(() => {
4    downloaded.push(name + ".js (" + kb + "kb)");
5    resolve(() => "rendered <" + name + "/>");
6  }, 100));
7async function app() {
8  console.log("first paint downloads:", downloaded.join(" + "));
9  console.log("user clicks the Reports tab…");
10  console.log("Suspense fallback: <Spinner/>");
11  const Chart = await lazyImport("Chart", 80);
12  console.log(Chart());
13  console.log("total downloaded:", downloaded.join(" + "));
14}
15app();

●

Your app has a Reports tab with a heavy chart library — 80kb that most users never open. Yet every user downloads it before they see ANYTHING. Why is the login page paying for the charts?

Because a bundler ships one file by default: your whole app, everywhere, up front. React.lazy is the scalpel — and a download ledger will keep the score.

📦 Memory boxes

what the program is remembering right now

nothing remembered yet

🖥️ What the computer shows

the answers the program prints out

nothing yet ▌

1/9

UP NEXT IN REACT

React.memo vs === — equal content, different identity

Implement memo’s real comparison, then watch an inline object defeat it every single render.

key={index} — the bug that puts Ravi’s number under Priya’s name React.memo vs === — equal content, different identity