The Large List Rendering Problem

Suppose you map over an array of ten thousand items and render a li for each. React will dutifully create ten thousand DOM nodes, even though only a couple dozen fit on screen at once.

Most of those nodes are off-screen and invisible, yet the browser must still create, lay out, and maintain every one of them.

The browser pays a real cost for large DOM trees. Layout, style recalculation, and memory all scale with node count, so a huge list slows initial render and inflates memory usage.

Even simple interactions can stutter when the engine has tens of thousands of nodes to track and reflow.