Introduction:
A usual difficulty with React is ensuring that large lists are displayed effectively. Showing thousands of products, customers, transactions, or logs using large numbers of DOM nodes will slow down your application.
It’s easy to render lists in React, but it isn’t automatically built to handle many users at once. This problem is solved using virtualization. When an application virtualizes, only things you can see are processed, which reduces both the time needed for loading and for scrolling.
In this article, we’ll dive into react-window, a slim library developed by Brian Vaughn that helps make virtual lists easy to use.
Prerequisites:
Node.js and npm
React
Array manipulation and rendering lists
Basic CSS for layout
What Is Virtualization?
Windowing (often called virtualization) means showing only what is displayed on the screen and not all entries on the list. As opposed to showing all 10,000 items on the page, a virtualized list loads the ones that can be seen by the user into the screen.
As you scan down the page, things coming into view are added to the DOM, and those leaving the display are removed. This results in scarce memory use and greater performance.
If you picture a window (that’s where the name comes from!), You’d only see a few parts even though lots more exist beyond it.
Why react-window?
Some virtualization libraries can be found in the React ecosystem, for instance react-virtualized and react-infinite-scroll. React-window is notable for some important reasons.
You will only need 2KB of space after everything is gzipped.
Tailored for speed since performance matters most in extensive user interfaces.
Anyone can easily master how to use and link the API.
A wide range of layouts : Vertical, horizontal and grid lists are supported.
Vaughn is with the React core team and also wrote react-virtualized.
With react-window, we only show the user what they can see, making the app faster and more responsive.
How react-window work?
The main idea behind react-window is actually quite easy to understand :
You choose both the number of elements you want and how much space they will require (in pixels).
Set the height (or width) of the list container in view.
It uses the position of the screen to determine what is currently visible in the Library.
It only adds to the DOM those items it has already identified.
Oftentimes, the things you don’t see are also hidden from the document—not in the DOM.
We use virtualization in the library for the following :
Vertical lists
Horizontal lists
Systems using rows and columns
End-user lists that either have fixed sizes or allow for items of different sizes
Frontend Setup in React :
We’ll write the code to get a better understanding of React code patterns :
Step-by-step Implementation
Step-1 : Create a React App
Let’s create a React app using the following command :
//Create a react app using the following command
npx create-react-app react-code-pattern --template typescript react-window
After the setup is complete, navigate to your project folder :
// Navigate to the project folder
cd virtualize-large-lists-app
npm start
This will start the development server, and you will be able to visit the app at http://localhost:3000.
Step-2 : Project Structure :
Make sure your project has the following folder structure:
Step-3 : Virtualize large lists using react-window Example:
// components/VirtualizedList.tsx
import React from "react";
import { FixedSizeList as List } from "react-window";
import { generateData } from '../utils/data';
const data = generateData(10000);
const Row = ({ index, style }: { index: number; style: React.CSSProperties }) => {
const item = data[index];
return (
<div style={style} className="row">
<strong>{item.name}</strong> - {item.email}
</div>
);
};
const VirtualizedList = () => {
return (
<List
height={800}
itemCount={data.length}
itemSize={35}
width={'100%'}
>
{Row}
</List>
);
};
export default VirtualizedList;
React-window’s FixedSizeList provides a virtual list filled with rows of equal height.
The generateData function is used to build exactly 10,000 mock users.
With react-window, you must style every item, covering positioning and height.
We use the index to get the appropriate item from the data array.
The list container will occupy a vertical space of 600px (equal to the viewport) before shrinking.
There are 10,000 items in total : itemCount={data.length}.
itemSize={35} : Each displayed item stands 35px tall.
The full width of the parent container is denoted by a width of 100%.
We use the Row component as a function to display every list item.
This means that only the parts in view within the 600px frame which fills approximately 17-18 rows, will be loaded for the DOM, with the others only shown virtually.
// utils/data.ts
export const generateData = (count: number) =>
Array.from({ length: count }, (_, index) => ({
id: index,
name: `User ${index}`,
email: `user${index}@example.com`,
}));
generateData(count: number) is a function that creates count mock user objects.
Array.from({ length: count }) : Makes an array containing count undefined elements.
We’re leaving out the first argument (_) which is usually the value. Only the second argument index is needed to make the ID and labels in this example.
Now we will import the VirtualizedList component into the main App.tsx file. This will create the UI renderer for that component.
// App.tsx
import VirtualizedList from "./components/VirtualizedList";
import "./App.css";
function App() {
return (
<div className="App">
<header className="App-header">
Virtualize large lists using react-window
</header>
<VirtualizedList />
</div>
);
}
export default App;
Output :
Conclusion:
To build a UI that responds well and is scalable, React relies on virtualization. Used correctly, react-window speeds up rendering and scrolling for a large list.By knowing and using container/presentational separation, custom hooks and React Context in your code, plus virtualization, you can build React apps that are clean, efficient and easy to maintain. Kick off by virtualizing your major processes and then you can expand with assurance.
