-
Book Overview & Buying
-
Table Of Contents
React Application Architecture for Production - Second Edition
By :
Even with pagination, users might load 10, 20, or 50 pages of data. If each page has 10 items, that's 500 DOM elements, each with its own event listeners, layout calculations, and memory usage. On slower devices, this can make the page feel sluggish. This can be demonstrated by inspecting the DOM in the browser.

Figure 8.6 – DOM inspection
As we can see, there are more DOM elements being rendered than the user can see at a time. This can be a performance bottleneck, especially on slower devices. This is where list virtualization comes in.
List virtualization is a technique that only renders items currently visible in the viewport. Instead of creating DOM elements for all 500 items in a list, we might only render the 10 that are visible, plus a few extra for smooth scrolling. As the user scrolls, items are mounted and unmounted as they enter and leave the viewport.

Figure 8.7 – List virtualization
We'll use the @tanstack/react-virtual...