You can see from the recording that it's downloading the same few files from Codesandbox over and over again, as the iframes used for the examples are being unloaded and reloaded on scrolls and because the author disabled caching.

The author could've scrolled forever and the number would've gone up indefinitely.

Exactly, the result would've been different if the author would not have disabled caching.

In this case it's because the iframes are loaded/unloaded multiple times, but we also spawn web workers where the same worker is spawned multiple times (for transpiling code in multiple threads, for example). In all those cases we rely on caching so we don't have to download the same worker code more than once.

Wouldn't it be better if the code editors only activated if the user interacts with one?

Even with caching it's absurd to download so much JS for a feature that probably most users will not use. It's a docs site after all.

Codesandbox is embedded for the code samples. If you not have cache disabled it will fetch from memory cache after the initial load and unload.

Maybe they forgot some `memo` so it re-renders everything including iframes all the time.

1) In React, re-renders don't destroy the DOM. So nothing would happen if iframes were re-rendered.

2) Rather, we intentionally unload interactive editor preview iframes to improve memory usage when you scroll away from them. We do load them again when you scroll up — and normally that would be instant because the code for them would get cached. But the author has intentionally disabled cache, so as a result they get arbitrarily high numbers when scrolling up and down.