How would you design a virtualized list for 100K+ items in React?

🧩 Scenario

You need a component that can display very large datasets (100k+ rows) smoothly. Requirements:

• Minimal DOM nodes (windowing)
• Support for variable row heights
• Smooth scrolling and fast jump-to-index
• Integrate with infinite loading / pagination
• Preserve scroll position when items change

🧠 Answer (Design Overview)

Core Concepts

1. Windowing / Window Size — only render items that are visible plus an overscan buffer above and below to avoid white gaps during fast scrolls.
2. Fixed vs Variable Heights — fixed heights are simplest (calculate indices by division); variable heights require measurement and a mapping from index → offset.
3. Recycling DOM nodes — reuse item DOM nodes while updating their content as the window moves.
4. Scroll anchoring / preserving scroll position — when prepending items or changing sizes, adjust scroll offset to keep view stable.
5. Jump-to-index — compute offset for index quickly (use prefix-sum of heights or estimate + refine).
6. Integration with Infinite Loading — trigger data fetch when user scrolls past a threshold.

Recommended Libraries

• react-window — great for fixed & variable lists (VariableSizeList)
• react-virtual (TanStack) — flexible hooks-based approach
• RecyclerListView — for mobile/web hybrid use-cases

Tradeoffs:

• Variable height lists complicate measurement and jump-to-index calculations.
• Custom implementations are powerful but easy to bug; prefer libraries unless you need special behaviors.

🎮 Live Demo: Virtualized List for 100K+ Items

🔍 Real-World Tips

• Use overscan to render a few extra items for smoothness.
• Use requestAnimationFrame for scroll handling heavy updates.
• For variable heights, keep a prefix-sum (cumulative height) structure for fast index↔offset conversions.
• Persist scroll position keys for back/forward navigation.
• Test with real data distribution — synthetic uniform sizes can hide edge cases.

Quick Practice

1. Replace the conceptual core with react-window's VariableSizeList and test with 100k items.
2. Implement a Fenwick tree (BIT) to store heights for O(log n) prefix sums.
3. Add jump-to-index API that scrolls to the calculated offset.

Summary

• Virtualization reduces DOM nodes and memory usage.
• Fixed heights are simpler; variable heights need measurements & prefix-sum structures.
• Prefer proven libraries unless you have a unique constraint.