I am a Javascript and React enthusiast, and I absolutely love writing technical blogs. There's just something about the process of breaking down complex concepts and sharing my knowledge with others that really excites me. In my free time, I enjoy exploring my other passions, such as painting, gardening, cooking, and managing my food blog.
5 minute read
While working on one of our client projects,
we noticed the application becoming laggy,
and at times even froze due to the large data set
getting loaded in the dropdown.
In this blog,
we will share how
the problem was solved using ‘Virtualization’.
Let’s first go through the term ‘Virtualization’.
What is Virtualization or Windowing?
Windowing or List virtualization is a technique of only rendering
the visible portion in the current “window” to the DOM.
The number of items that are rendered for the first time is the subset of a large list.
As the user scrolls down the list, the newer elements replace the old ones.
This keeps the number of all rendered elements specific to the size of the window.
Virtualization or Windowing by Brian Vaughn
Now, let us consider a dropdown that has more than 1000+ options to be loaded.
Loading complete data at once
Loading 1000+ options the first time caused dropdown to become unresponsive.
If we look at the performance, the
FPS( Frames per second )
is light red, which is not a good indication.
Let us see how virtualization can help to improve the performance of the dropdown.
Using lazy loading and pagination
To improve the performance of the dropdown we can use lazy loading
or in other words ‘infinite loading’.
Infinite loading adds new DOM nodes into the list as the user scrolls
past a certain threshold close to the end.
hasNextPage is used to check if there are more pages to be loaded.
isNextPageLoading checks if the data is being loaded
and accordingly shows a loader in the menu list.
loadNextPage is a callback to be invoked when more rows must be loaded.
It should return a Promise that is resolved once all data has finished loading.
FixedSizeList is wrapped in InfiniteLoader for lazy loading.
The props assigned to the loader are:
isItemLoaded: Function responsible for tracking the loaded state of each item.
itemCount: Number of rows in the list
loadMoreItems: Callback to be invoked when more rows must be loaded.
A significant improvement in the performance of the dropdown is seen.