Virtualization

Virtualization (windowing) renders only visible rows or cells in large lists/tables, keeping DOM node count bounded. Libraries like `react-window` or TanStack Virtual measure scroll position and mount/unmount off-screen items.

					// Concept: render items in [startIndex, endIndex] only
const rowHeight = 48;
const visibleCount = Math.ceil(viewportHeight / rowHeight) + overscan;
				

| Concern | Approach | |---------|----------| | Variable row height | Measure or estimate; remeasure on resize | | Accessibility | Preserve focus and keyboard nav across scroll | | Selection | Track selected IDs outside DOM nodes | | Infinite load | Fetch next page when near scroll end |

Virtualization helps INP and memory on 10k-row admin tables but adds complexity. Do not virtualize short lists—the overhead exceeds benefit.

On interviews: fixed vs dynamic height; overscan trade-off; how virtualization interacts with screen readers; when pagination is simpler.

Common pitfalls: broken keyboard navigation; scroll jank from layout measurement; assuming equal row heights when content wraps.

The trade-off is DOM efficiency versus implementation and a11y complexity.

Checklist:

• Virtualize only when list size hurts metrics.
• Test keyboard and screen reader flows.
• Stabilize row height or measure carefully.
• Keep selection state in data, not DOM.