React Render Virtualize Large List example. In React, Data in large numbers can profoundly impact on website’s performance. Don’t worry if you want to tackle such a problem.

Have you ever heard the term Virtualize? Well, if you haven’t heard it before, then don’t worry. We will teach you how to virtualize a list in React.

In this tutorial, we will learn how to create virtualize a large list in React js environment using the react-window library.

The react-window module helps large lists to be retrieved seamlessly. We will create a component that accommodates a large virtualize list; this is a valuable approach, especially when we have to show a large list and table with multiple rows.

This directly impacts the performance; hence we will follow the List virtualization method. In the List virtualization approach, only visible data to the user is rendered.

Build React Project

To build a new React application. You have to first move to the console screen, then type and then execute the given command.

npx create-react-app my-react-app

Use command to enter into the project folder.

cd my-react-app

Install React Window Library

We are installing React window library, therefore, go ahead and invoke the following command.

npm install react-window

Add Bootstrap Module

To design the large list, we may use Bootstrap module. Here is the single command that can easily add bootstrap in React.

npm install bootstrap

Create Component File

Next, make the features/LargeList.js file;this is the basic code to create the functional component in React.

import React from 'react'

function LargeList() {
  return (
    <div></div>
  )
}

export default LargeList

Build Large List in React

We can now use features/LargeList.js component to render the large virtualized list.

Import FixedSizeList from react-window package. The fetch method makes the request; It renders the records that we are going to add to the Row const. Use the fetch response through Row const to build the large list in React.

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

function LargeList() {
  const [posts, setPosts] = React.useState([]);

  const URL = "https://jsonplaceholder.typicode.com/posts";

  React.useEffect(() => {
    fetch(URL)
      .then((res) => res.json())
      .then((res) => {
        setPosts(res);
      });
  }, []);

  const Row = () => (
    <div>
      <ul className="list-group">
        {posts.map((data, i) => {
          return (
            <li className="list-group-item" key={i}>
              {data.title}
            </li>
          );
        })}
      </ul>
    </div>
  );

  function handleOnWheel({ deltaY }) {
    console.log("handleOnWheel()", deltaY);
  }

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

  return (
    <div>
      <List
        height={400}
        width={400}
        itemSize={50}
        outerElementType={outerElementType}
        itemCount={posts.length}
      >
        {Row}
      </List>
    </div>
  );
}

export default LargeList;

Register Component in App.js

You have to register the LargeList component into the src/App.js global component.

import "../node_modules/bootstrap/dist/css/bootstrap.min.css";
import LargeList from "./features/LargeList";

const App = () => {
  return (
    <div className="container mt-5">
      <h2 className="mb-4">React Virtualized Large List Example</h2>
      <LargeList />
    </div>
  );
};

export default App;

Start Development Server

Let us run the react server, use the suggested command to invoke the server.

npm start

Start the react app using the following URL:

http://localhost:3000