engineering

List Virtualization

Irshadi Bagasputro

26 March 2022 · 2 min read

List Virtualization

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 ?

Virtualized List concept by Brian Vaughn

"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:

react-window Bundlesize.png

react-virtualized Bundlesize.png

The API’s for both package are relatively similar, but in this case I will use react-window.

List Virtualization Implementation

List Virtualization.png

Lists render a windowed list (row) of elements meaning that only the visible rows are displayed to users (e.g FixedSizeListVariableSizeList). Lists use a Grid (internally) to render rows, relaying props to that inner Grid.

Grid Virtualization Implementation

Grid Virtualization.png

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


React Hooks 101engineering

React Hooks 101

Introduction to Hooks Before we're going to talk about most use cases of React Hooks, I'm gonna tell you what is React Hooks is,—well, I'm not gonna …

04 December 2020 · 11 min read

No article left in Category:

Maybe browse for Another Article ?


© 2022 irshadibagas.com