Irshadi Bagasputro
26 March 2022 · 2 min read
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.
"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.
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
.
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 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.
More Article from Me
No article left in Category:
Maybe browse for Another Article ?