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

Output - Rendering long lists using virtualization with React - Clue Mediator

Rendering long lists using virtualization with React

1. Project structure
2. Package dependencies
3. Implementation
4. Output

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.

npm i react-virtualized

You will find the version of the following packages in React application.

react

^18.2.0

react-virtualized

^9.22.3

3. Implementation

Refer to the following files for implementation.

utils.js

// List data as an array of strings
export const dataSet = [...Array(100000).keys()].map(x => `Item ${x + 1}`);

Item.js

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} class="item">
      Clue Mediator - {dataSet[index]}
    </div>
  );
}

export default Item;

App.js

import React from 'react';
import { List } from 'react-virtualized';
import { dataSet } from './utils';
import Item from './Item';

function App() {
  return (
    <div class="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} class="list-box">
    </list></div>
  );
}

export default App;

index.css

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;
}

index.js

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 class="strictmode">
    <app>
  </app></react>
);

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..!!

Demo & Source Code

GitHub Repository StackBlitz Project