Rendering long lists using virtualization with React
Rendering long lists using virtualization with React is a technique for improving the performance of displaying large lists of items in a web application built using the React JavaScript library.
The basic idea is to only render the items that are currently visible on the screen, rather than rendering the entire list at once. This can be achieved by using a virtualization library, such as react-virtualized, that provides a way to efficiently render a large number of items by only rendering the items that are currently visible in the viewport.
By using virtualization, it can significantly improve the performance of your application by reducing the number of DOM elements that need to be rendered and managed by the browser, which can help to avoid issues such as slow scrolling and memory leaks. Additionally, it can also improve the overall user experience by making the application feel more responsive and faster.
Demo Application
Here, we’ll render 1 lakh items in the list using virtualization
Rendering long lists using virtualization with React
1. Project structure
- react-list-virtualization-example
- node_modules
- public
- index.html
- src
- App.js
- index.css
- index.js
- Item.js
- utils.js
- package-lock.json
- package.json
- README.md
2. Package dependencies
Run the following command to install react-virtualized npm package.
1 | npm i react-virtualized |
You will find the version of the following packages in React application.
3. Implementation
Refer to the following files for implementation.
1 2 | // List data as an array of strings export const dataSet = [...Array(100000).keys()].map(x => `Item ${x + 1}`); |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | import React from 'react'; import { dataSet } from './utils'; const Item = ({ key, // Unique key within array of rows index, // Index of row within collection isScrolling, // The List is currently being scrolled isVisible, // This row is visible within the List (eg it is not an overscanned row) style, // Style object to be applied to row (to position it) }) => { return ( <div key={key} style={style} className='item'> Clue Mediator - {dataSet[index]} </div> ); } export default Item; |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | import React from 'react'; import { List } from 'react-virtualized'; import { dataSet } from './utils'; import Item from './Item'; function App() { return ( <div className="App"> <h4>Rendering long lists using virtualization with React - <a href="https://www.cluemediator.com">Clue Mediator</a></h4> <List width={500} height={300} rowCount={dataSet.length} rowHeight={50} rowRenderer={Item} className='list-box' /> </div> ); } export default App; |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | body { margin: 20px; font-family: Arial, Helvetica, sans-serif; } .list-box { border: 1px solid #ddd; border-radius: 4px; } .item { background-color: aliceblue; display: flex; align-items: center; padding-left: 10px; } .item:nth-child(even) { background-color: #efefef; } |
1 2 3 4 5 6 7 8 9 10 11 12 | import React from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; import App from './App'; const root = ReactDOM.createRoot(document.getElementById('root')); root.render( <React.StrictMode> <App /> </React.StrictMode> ); |
4. Output
Run your application and check the output in the browser.
Live Demo
That’s it for today.
Thank you for reading. Happy Coding..!!
