Optimize Your Code by using React Virtualized…

Hi Guys , We are going to discuss about a npm package called React-virtualized.Virtualization is the main core of React Application,The virtual DOM is a programming concept where an ideal, or “virtual”, representation of a UI is kept in memory. Then, it is synced with the “real” DOM by a library such as React DOM. This is the main concept behind the creating React-Virtualized.

1. What is React Virtualized ?

It is an open-source library which provides you many components in order to window some of your application List, Grid etc.As a developer, you do not want to reinvent the wheel. React-virtualized is a stable and maintained library. Its community is large and as it is open-source, many modules and extensions are already available in order to window a maximum of elements.Furthermore, it offers lots of functionalities and customization that you would not even think about.We can check the official documentation :

https://github.com/bvaughn/react-virtualized

2. What is the core concept of React Virtualized ?

The main concept behind virtual rendering is rendering only what is visible.There are one thousand data in the app, but it only shows around ten at any moment (the ones that fit on the screen), until you scroll to show more.So it makes sense to load only the elements that are visible and unload them when they are not by replacing them with new ones.

React-virtualized implements virtual rendering with a set of components that basically work in the following way:

1. They calculate which items are visible inside the area where the list is displayed (the viewport).

2. They use a container with relative positioning to absolute position the children elements inside of it by controlling its top, left, width and height style properties.

There are five main components:

• Grid. It renders tabular data along the vertical and horizontal axes.
• List. It renders a list of elements using a Grid component internally.
• Table. It renders a table with a fixed header and vertically scrollable body content. It also uses a Grid component internally.
• Masonry. It renders dynamically-sized, user-positioned cells with vertical scrolling support.
• Collection. It renders arbitrarily positioned and overlapping data.

These components extend from React.PureComponent, which means that when comparing objects, it only compares their references, to increase performance.

Now let’s see how to use the List component to virtualize names and pictures of 100 Pokemon’s .So let’s get started:

3. Implementation:

Folder Structure

So this is the folder structure of our code ,this is the basic structure of folder which we get by default by running npx create-react-app <project_name>. Just we have added a new component List.js, which is our main component,which will render the virtualized list of 100 Pokemon.So let’s see the App.js.

App.js

In App.js ,we have imported Lists component. We have used stateless App component ,so we used useEffect to fetch data to from pokeapi, a built-in api which contains all the details of all Pokemon.So first we fetching the data , and by .then function we are waiting for response , then we are converting the string response into json format.We are actually iterating through the response and using pokemon url coming from response to fetch data about each pokemon and pushing those data into a empty array called data. After that we are passing data as props to our component Lists.Now let’s see the our Lists component:

Lists.js

Lists.js

Lists.js

In Lists.js we are actually applying the main concept of react virtualized. Before going to the explanation of the code,we should know that react-virtualized also includes some HOC components like AutoSizer. AutoSizer automatically adjusts the width and height of another component. AutoSizer component will fill all of the available space of its parent.The vh unit corresponds to the height to the viewport (the browser window size), so 100vh is equivalent to 100% of the height of the viewport. So we are importing List and AutoSizer from react-virtualized. We are de-structing data from props. AutoSizer have two parameter which are used to create DOM ,width and height .Width represent the width of the parent div and Height represent the height of the parent div .We also declared a variable like itemsPerRow to determine how many item we want in each row and rowCount which determine how many rows are required to display the data in our application.We are rendering 100 Pokemon’s name and picture so we are dividing 100 by the itemsPerRow and taking the upper integral value. After that we are returning the List which we import from react-virtualized, List have some parameters like width, height etc,we are passing width and height of AutoSizer as the width and height of the List, send our rowCount and set RowHeight to 100. RowRenderer is the function which actually renders the rows of the list ,it takes three parameters index,key and style.We are declaring an empty array called items ,we are multiplying index and itemsPerRow and set it as fromIndex, then we are adding fromIndex and itemPerRow to get the toIndex of our List.Now we are running a loop from fromIndex to toIndex to iterate through the data to create the DOM which will be rendered in each row, then we are pushing the data into the item array. Finally the List is returning the items which is the array of DOM which are rendering in each rows.Let’s see our virtual Pokemon list :

Pokemon Virtualize List

Now if you’re using Chrome, follow these steps to do a quick test:

1. Open the Developer tools panel.
2. Press Command+Shift+P (Mac) or Control+Shift+P (Windows, Linux) to open the Command Menu.
3. Start typing Rendering in the Command Menu and select Show Rendering.
4. In the Rendering tab, enable FPS Meter.
5. Scroll through the list one more time.

Constant Frame speed

We can see there is a almost constant Frame per speed , which is a good thing for any application , usually if we don’t use react virtualized to render huge number of data on our application ,there is no consistency in the frame per speed what is not good.In less powerful devices or with more complex layouts, this could freeze the UI or even crash the browser.But If we are using react virtualized we fixed that performance issue.

4. Conclusion:

So we see how we can improve performance of our application using react-virtualized to render a huge number of data in our application.There are many more cool staffs we can do using such npm packages to improve the performance of our application.It’s just a basic article to get an idea on react-virtualized so that we can start exploring more about it.Sharing my github link as a reference for the code base:

Yudhajitadhikary/ReactVirtualized_Blog

HAPPY CODING….:)