What is Virtualization?<\/h3>\n
In web development, virtualization refers to rendering only the visible portion of a large data set to the DOM while keeping the rest in memory. This approach significantly reduces the number of DOM nodes, enhancing rendering performance and improving the overall user experience.<\/p>\n
Problem Overview<\/h3>\n
When dealing with large lists or grids in React, rendering all components at once can lead to several performance issues. Here\u2019s a breakdown of the common problems developers face:<\/p>\n
- \n
- Excessive DOM Updates<\/strong>
\nReact renders all components in a list by default, and if that list is large (for example, thousands of items), this results in a large number of DOM nodes being created. Such a large volume of DOM updates can cause performance bottlenecks, making the application sluggish.<\/li>\n- Increased Memory Usage<\/strong>
\nLoading all the components in a large list at once can consume a significant amount of memory. Browsers may struggle to manage such a large number of DOM elements, resulting in crashes or unresponsive pages.<\/li>\n- Long Initial Load Times<\/strong>
\nWithout using virtualization, React renders the entire list or grid as soon as the component mounts, leading to longer load times. This can create a poor user experience, as users might see blank screens or experience delays in loading when they expect immediate interaction.<\/li>\n- Unresponsive Scrolling<\/strong>
\nRendering large lists all at once can cause the UI to become unresponsive during scrolling. Since React has to update the DOM for every scroll event, users may experience laggy or delayed scrolling behaviour, often referred to as \u201cjanky scrolling.\u201d<\/li>\n<\/ul>\nHow to Tackle Rendering Large Lists in React?<\/h3>\n
If you end up in a place where you have to render tens of thousands of complex list items, you would inevitably have to use one of the following solutions, no matter how capable your end user\u2019s hardware is. Firstly we\u2019ll start with a general solution that everyone can incorporate into their code:<\/p>\n
Why Virtualization Matters: Trade-offs<\/h3>\n
While virtualization drastically improves performance, it\u2019s important to understand the trade-offs:<\/p>\n
- \n
- Initial Complexity<\/strong>: Implementing virtualization adds complexity to your codebase compared to a simple list rendering. However, tools like react-virtualized mitigate this with pre-built components.<\/li>\n
- Scrolling Behavior<\/strong>: Virtualization renders only a subset of list items at a time, which can result in some items briefly disappearing during fast scrolling, depending on your settings.<\/li>\n
- Overhead<\/strong>: Virtualization introduces some overhead by calculating which items are visible and managing off-screen data. Although this is minimal compared to rendering all elements, it\u2019s worth considering.
\nUltimately, the performance gains far outweigh these trade-offs for lists with over a few hundred items.<\/li>\n<\/ul>\nPerformance Benchmark: Before and After Virtualization<\/h3>\n
Before –<\/p>\n
![\"bad](\"https:\/\/www.tothenew.com\/blog\/wp-ttn-blog\/uploads\/2024\/09\/bad-per-1.png\")
Lighthouse score<\/p><\/div>\n
After adding virtualization-<\/p>\n
![\"Lighthouse](\"https:\/\/www.tothenew.com\/blog\/wp-ttn-blog\/uploads\/2024\/09\/good-performance-1.png\")
Lighthouse score of massive list with virtualization<\/p><\/div>\n
<\/p>\n
Setting Up the Project<\/h3>\n
To demonstrate virtualization, we\u2019ll create a simple React application using the react-virtualized library.<\/p>\n
Step 1:<\/strong> Create a React Application<\/p>\n
npx create-react-app react-virtualization-example\r\n\r\ncd react-virtualization-example\r\n\r\nnpm install react-virtualized<\/pre>\n
Step 2:<\/strong> Basic Component Setup<\/p>\n
Create a component to display a virtualized list.<\/p>\n
\/\/ src\/VirtualizedList.js\r\n\r\nimport React from 'react';\r\n\r\nimport { List } from 'react-virtualized';\r\n\r\nimport 'react-virtualized\/styles.css'; \/\/ only needs to be imported once\r\n\r\nconst VirtualizedList = ({ items }) => {\r\n\r\n\u00a0const rowRenderer = ({ key, index, style }) => (\r\n\r\n\u00a0\u00a0\u00a0<div key={key} style={style} className=\"list-item\">\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0{items[index]}\r\n\r\n\u00a0\u00a0\u00a0<\/div>\r\n\r\n\u00a0);\r\n\r\n\u00a0return (\r\n\r\n\u00a0\u00a0\u00a0<List\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0width={300}\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0height={600}\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0rowCount={items.length}\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0rowHeight={50}\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0rowRenderer={rowRenderer}\r\n\r\n\u00a0\u00a0\u00a0\/>\r\n\r\n\u00a0);\r\n\r\n};\r\n\r\nexport default VirtualizedList;<\/pre>\nIntegrating the Virtualized Component<\/p>\n
Step 3:<\/strong> Use the Virtualized Component in Your App<\/p>\n
\/\/ src\/App.js\r\n\r\nimport React from 'react';\r\n\r\nimport VirtualizedList from '.\/VirtualizedList';\r\n\r\nconst App = () => {\r\n\r\n\u00a0const items = Array.from({ length: 100000 }, (_, index) => `Item ${index + 1}`);\r\n\r\n\u00a0return (\r\n\r\n\u00a0\u00a0\u00a0<div className=\"App\">\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0<h1>Virtualized List Example<\/h1>\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0<VirtualizedList items={items} \/>\r\n\r\n\u00a0\u00a0\u00a0<\/div>\r\n\r\n\u00a0);\r\n\r\n};\r\n\r\nexport default App;\r\n\r\n<\/pre>\nAdvanced Usage<\/p>\n
Step 4:<\/strong> Customizing the Virtualized List<\/p>\n
Explore advanced features of react-virtualized such as dynamic row heights, infinite scrolling, and more.<\/p>\n
import React from 'react';\r\n\r\nimport { InfiniteLoader, List, AutoSizer } from 'react-virtualized';\r\n\r\nconst InfiniteVirtualizedList = ({ loadMoreRows, isRowLoaded, rowCount }) => {\r\n\r\n\u00a0const rowRenderer = ({ key, index, style }) => (\r\n\r\n\u00a0\u00a0\u00a0<div key={key} style={style} className=\"list-item\">\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0{`Item ${index + 1}`}\r\n\r\n\u00a0\u00a0\u00a0<\/div>\r\n\r\n\u00a0);\r\n\r\n\u00a0return (\r\n\r\n\u00a0\u00a0\u00a0<InfiniteLoader\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0isRowLoaded={isRowLoaded}\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0loadMoreRows={loadMoreRows}\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0rowCount={rowCount}\r\n\r\n\u00a0\u00a0\u00a0>\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0{({ onRowsRendered, registerChild }) => (\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<AutoSizer>\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0{({ height, width }) => (\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<List\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0height={height}\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0width={width}\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0onRowsRendered={onRowsRendered}\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0ref={registerChild}\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0rowCount={rowCount}\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0rowHeight={50}\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0rowRenderer={rowRenderer}\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/>\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0)}\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/AutoSizer>\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0)}\r\n\r\n\u00a0\u00a0\u00a0<\/InfiniteLoader>\r\n\r\n\u00a0);\r\n\r\n};\r\n\r\nexport default InfiniteVirtualizedList;\r\n\r\n<\/pre>\nConclusion<\/h3>\n
Virtualization is a powerful technique to enhance the performance of React applications dealing with large data sets. By rendering only the visible items, we can significantly improve the efficiency and responsiveness of our apps. Tools like react-virtualized<\/a> make implementing this technique straightforward, providing a range of features to cater to various use cases.<\/p>\n
Our React js competency<\/a> understands the key features, toolchain, and React API libraries to build lightweight and interactive applications. Reach out<\/a> to our experts to know more.<\/p>\n","protected":false},"excerpt":{"rendered":"
Introduction Performance is key in modern web development. Managing efficient rendering becomes crucial as web applications grow in complexity and data volume. One effective technique for improving performance in React applications is virtualization. This article will explore virtualization, why it matters, and how to implement it in a React application. What is Virtualization? In web […]<\/p>\n","protected":false},"author":1992,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"iawp_total_views":34},"categories":[5876],"tags":[55,1308,4064,1504],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/66743"}],"collection":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/users\/1992"}],"replies":[{"embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/comments?post=66743"}],"version-history":[{"count":11,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/66743\/revisions"}],"predecessor-version":[{"id":68462,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/66743\/revisions\/68462"}],"wp:attachment":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/media?parent=66743"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/categories?post=66743"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/tags?post=66743"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
- Scrolling Behavior<\/strong>: Virtualization renders only a subset of list items at a time, which can result in some items briefly disappearing during fast scrolling, depending on your settings.<\/li>\n
- Increased Memory Usage<\/strong>