3 ms·
What's up with the React site? This is embarrassing...
by pier25 3y ago
What's up with the React site?
This is embarrassing...
- tjosepo 3y agoYou 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.
- CompuIves 3y agoExactly, 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.
- pier25 3y agoWouldn'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.
- makepanic 3y agoCodesandbox is embedded for the code samples. If you not have cache disabled it will fetch from memory cache after the initial load and unload.
- silverwind 3y agoMaybe they forgot some `memo` so it re-renders everything including iframes all the time.
- danabramov 3y ago1) 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.