List Virtualization
Irshadi Bagasputro
26 March 2022 · 2 min read
What is List Virtualization ?
There may be times where we need to display a large list or large table that contains many columns or many rows – sometimes, even both. Loading every single item on such a list can affect performance significantly. Enter virtualized list —or also know as “windowing”, which was a concept of only rendering what is visible to users. This concepts solve the performance problems of rendering large list or table.
How does List Virtualization Works ?
"Virtualizing" a list of items involves maintaining a window and moving that window around your list. The number of elements that are rendered at first is a very small subset of the entire list and the "window" of visible content moves when the user continues to scroll. Let’s put it this way: Imagine you have 1000 list of elements, rather than rendering 1000 of elements — which can affects performance, because on slower initial rendering or scroll performance. Instead, You only render 5 elements that visible to the user. By implementing virtualized list, it would benefit the low-end devices. You can display more items as the user scrolls, replacing the previous list element with the new one.
How to implement List Virtualization ?
There’s several library out there that provides this function. But my top two is by Brian Vaughn, react-virtualized and react-window. Personally, I would prefer react-window over the other just because it’s much smaller and faster. Here’s the comparison:
The API’s for both package are relatively similar, but in this case I will use react-window.
List Virtualization Implementation
Lists render a windowed list (row) of elements meaning that only the visible rows are displayed to users (e.g FixedSizeList, VariableSizeList). Lists use a Grid (internally) to render rows, relaying props to that inner Grid.
Grid Virtualization Implementation
Grid renders tabular data with virtualization along the X-Axis and Y-Axis — this means it has both vertical and horizontal virtualization support. (e.g FixedSizeGrid and VariableSizeGrid). It only renders the Grid cells needed to fill itself based on current horizontal/vertical scroll positions.
Stay Tuned on the Implementation Guide !
More Article from Me
No article left in Category:
Maybe browse for Another Article ?