MUI Virtualization

Why Virtualize

Rendering 1000+ DOM nodes causes:

• Layout thrashing — the browser recalculates layout for every node on scroll
• Memory pressure — each MUI ListItem creates 3-5 DOM elements (ripple, text, icon wrappers)
• Initial paint delay — 10,000 items can take 2-4 seconds to mount

The fix: render only the visible items plus a small overscan buffer. Libraries like react-window and react-virtuoso handle the math; you supply the row renderer.

Rule of thumb: virtualize any list with more than 100 items, or any list where item count is unbounded (API-driven).

react-window with MUI