Windowing & Virtualization

If you try to render 10,000 items (each with an image and text) in a standard React list, the browser will lag during scroll. The reason? The DOM Node Count. Virtualization fixes this by only rendering the items that are currently visible on the screen.

1. How it Works

As the user scrolls, virtualization libraries (like react-window or tanstack-virtual) "Recycle" DOM nodes. When Item 1 moves off-top, its DOM element is repositioned to the bottom and its content is updated to reflect Item 20. The browser thinks there are only 10 items, no matter how many millions are in the array.

2. Scrolling Performance

This keeps the DOM tree shallow. A shallow tree means incredibly fast scrolling and low memory usage. This is exactly how the **Facebook Feed** and **Spotify Playlists** handle infinite scrolling so smoothly.

4. Interview Mastery

Q: "What are the challenges of using virtualization with variable-height items?"

Architect Answer: "It is significantly harder. To calculate the scrollbar position and the correct item offset, the library needs to know the height of every item. If the heights vary (e.g., social media posts with different text lengths), you must either **Measure** them ahead of time or use an **Estimated Height** and dynamically adjust as the user scrolls. Modern libraries use an 'Intersection Observer' or 'Resize Observer' to handle this challenge efficiently."