Skip to content
Related Articles

Related Articles

How to use react-window Module in ReactJS?

View Discussion
Improve Article
Save Article
  • Last Updated : 05 Mar, 2021
View Discussion
Improve Article
Save Article

React window works by only rendering part of a large data set. This module is very easy to integrate and reduces the amount of time which generally takes a while to render. This module avoids the over-allocation of DOM nodes. We can use the react-window module in ReactJS using the following approach.

Creating React Application And Installing Module:

Step 1: Create a React application using the following command.

npx create-react-app foldername

Step 2: After creating your project folder i.e. foldername, move to it using the following command.

cd foldername

Step 3: After creating the ReactJS application, Install the material-ui and react-window modules using the following command.

npm install @material-ui/core
npm install react-window

Project Structure: It will look like the following.

Project Structure

Example: Now write down the following code in the App.js file. Here, App is our default component where we have written our code.


import React from "react";
import ListItem from "@material-ui/core/ListItem";
import ListItemText from "@material-ui/core/ListItemText";
import { FixedSizeList } from "react-window";
function renderOurRow(props) {
  const { index } = props;
  return (
    <ListItem key={index} button>
      <ListItemText primary={`Sample Item ${index + 1}`} />
export default function App() {
  return (
    <div style={{ display: "block", padding: 30 }}>
      <h4>How to use react-window Module in ReactJS?</h4>
      <FixedSizeList height={250} 

Step to Run Application: Run the application using the following command from the root directory of the project.

npm start

Output: Now open your browser and go to http://localhost:3000/, you will see the following output.


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!