Check out the react-window library for handling big data list rendering
Check out the react-window library for handling big data list rendering
Tram Ho
Problem:
Certainly, when coding a project with React.js , it is not uncommon to get data from the server to display in the form of a list such as a list or table. There will be times when you will get very large returns, making React rendering a list / table cumbersome and time consuming. Especially the data to render is large number of page images, pdfs, … it affects the perfermance and also consumes a lot of memory. This is when you start thinking about the end-user experience. To solve that problem, there will be a way, but today I will mention react-window a lightweight, but extremely effective library, streamlined from react-virtualized library by the author.
Perform :
Project installation:
Use the create-react-app command to initialize the project
Next install react-window library using yarn add react-window or npm i react-window
Here is the code after setup:
In the picture are the two usual renderings and using react-window ‘s FixedSizeList
In the usual way it will render 20000 Row into the DOM which will result in longer element render time.
However with FixedSizeList it only renders around 10 element displayed on the screen, when you scroll to it it will render to it.
Imagine you want to render a PDF file of a few hundred pages, rendering all of those pages at once is not really optimal, instead we just render the files we need to see so it reduces the time. time and memory go quite a bit.
How libraries work:
Some parameters passed to props such as height , width indicate the height and width of the container List , itemSize is the height of each Item inside, itemCount total number of Item inside. To pass an argument to the List ‘s chirldren we just pass itemData that each Item will receive as passed by Item ‘s props, innerRef , outerRef creates an Element inside, outside of it (usually “div”). onScroll this is the props type function which will return offset position information when we scroll
In terms of how the library works, it uses a virtualized list that renders only Item on the screen differently than it normally renders them all. From height and width it determines the size of List , based on itemSize and itemCount it determines the length of that List, for example itemSize : 200 and itemCount : 1000 , the overall height of List is 200 000. Item in List will is rendered based on the offsetScroll position with position : absolute , and the number of pre-rendered Item also calculated from height and itemSize to keep itemSize smooth and optimal.
