How to Build Large Virtualize List using React 18 Window

Last Updated on March 4, 2024 by Digamber in React JS

Handling extensive data in React can compromise performance; we can manage the large data using Virtualize list.

In this guide, you will ascertain how to create virtualize list component in React js application and handle the large records in a list using the react-window package.

The react-window module is especially used to render large lists in React.

It displays only rendered content in multiple rows and table views format in React.

The react window package is exceptionally facile to implement and swiftly renders only rendering part of a large data set through the virtualization method in React.

React JS Render Large Virtualize List Example

• Step 1: Create React Application
• Step 2: Add React Window Package
• Step 3: Set Up Bootstrap CSS
• Step 4: Make New Component
• Step 5: Create Large List Component
• Step 6: Update App Component
• Step 7: View App on Browser

Create React Application

To install or create a new project called react-blog, execute the suggested command from the terminal.

Make sure to have Node and NPM configured on your system before you invoke the command.

npx create-react-app react-blog

Next, go inside the project folder.

cd react-blog

Add React Window Package

You have to add the react-window package now, therefore use the suggested command using npm through the console.

npm i react-window --legacy-peer-deps

Set Up Bootstrap CSS

If you are not comfortable writing custom CSS. Worry not! we have a ready-made solution for your.

Execute the following command using npm from the terminal.

npm i bootstrap --legacy-peer-deps

Now, the bootstrap module is added and saved in the package.json file, add the Bootstrap CSS file path in the App.js file.

import React from "react";
import "../node_modules/bootstrap/dist/css/bootstrap.min.css";
import "./App.css";

function App() {
  return (
    <div>
      
    </div>
  );
}

export default App;

Make New Component

Head towards the src/ folder, create the new folder name it components/. Subsequently, make the LongList.js file, this will be the pivot point of your React project.

import React from 'react'

function LongList() {
  return (
    <div>LongList page</div>
  )
}

export default LongList

Create Large List Component

Now, add the code into the components/LongList.js file.

We imported FixedSizeList module from “react-window” pacakge.

Set the functional component state for managing the data for virtualized list.

Render the data in the extensive list using the map method.

You can customize the List component using the list properties and set the height, width, item size, item count, etc.

import React, { useState, useEffect } from "react";
import { FixedSizeList as List } from "react-window";

export default function LongList() {
  const [users, setUsers] = useState([]);

  const REST_API = "https://jsonplaceholder.typicode.com/users";

  useEffect(() => {
    fetch(REST_API)
      .then((response) => response.json())
      .then((response) => {
        setUsers(response);
      });
  }, [users]);

  const virtualizeList = () => (
    <ul className="list-group">
      {users.map((item, index) => {
        return (
          <li className="list-group-item" key={index}>
            <strong>{item.name}</strong>
            <strong>{item.email}</strong>
          </li>
        );
      })}
    </ul>
  );

  function initOnWheel({ deltaY }) {
    console.log("Event invoked on whell movement", deltaY);
  }

  const handleElement = React.forwardRef((props, ref) => (
    <div ref={ref} onWheel={initOnWheel} {...props} />
  ));

  return (
    <div>
      <List
        height={350}
        width={420}
        itemSize={55}
        outerElementType={handleElement}
        itemCount={users.length}
      >
        {virtualizeList}
      </List>
    </div>
  );
}

Update App Component

The LongList component is ready, however it won’t display result on the browser.

There is one more thing left to be done; that is to add the LongList component to the src/App.js main component.

Here is how you can register the LongList component.

import React from "react";
import "../node_modules/bootstrap/dist/css/bootstrap.min.css";
import "./App.css";
import LongList from "./components/LongList";

function App() {
  return (
    <div className="container mt-5">
      <h2 className="mb-3">React JS Render Large Virtualize List Example</h2>
      <LongList />
    </div>
  );
}

export default App;

View App on Browser

In the last step, we have to ultimately start the React application. We can do it by executing the following command, use the given command.

npm start

On the console given url will be shown; you can use the URL to view the app on the browser.

http://localhost:3000

Conclusion

In this post, we have found how to render only the rendered part of a large data set in React JS.

It reduces the amount of work and elevates the performance when it comes to rendering the initial view and processing updates.

On the other hand, this lowers the memory footprint by sidestepping the over-allocation of DOM nodes.