ReactList is a versatile React component designed for rendering large, scrollable lists efficiently. It leverages virtualization techniques to render only the visible items, significantly improving performance for long lists. Currently at version 0.8.18, it maintains broad compatibility with React versions from 0.14 through 19. While a 0.x.x version suggests a pre-1.0 stable release, its ongoing compatibility with modern React indicates active maintenance. Key differentiators include support for different item sizing strategies via its `type` prop (uniform, variable, simple), custom item and items renderers, and flexible control over the scroll parent, making it adaptable to various UI layouts and performance needs. It focuses on providing a performant scrolling experience without over-rendering DOM elements.
Install & Compatibility
Where this runs
tested against v? · npm install
Install × environment matrix
Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux
muslnode 18–226 runs
build_error
glibcnode 18–226 runs
build_error
Code
Verified usage
Verified import paths — ran on the pinned version, not inferred.
ReactList is exported as a default export. CommonJS `require` is generally not recommended in modern React projects using ESM.
import ReactList from 'react-list';
Demonstrates a basic ReactList setup to render 1000 uniform items with a mock data loader, showcasing its infinite scroll capabilities within a fixed-height container.
import React from 'react';
import ReactList from 'react-list';
// Mock data loading function
const loadAccounts = (callback) => {
setTimeout(() => {
const accounts = Array.from({ length: 1000 }, (_, i) => ({ id: i, name: `Account ${i + 1}` }));
callback(accounts);
}, 50);
};
class MyComponent extends React.Component {
state = {
accounts: []
};
componentDidMount() {
loadAccounts(this.handleAccounts);
}
handleAccounts = (accounts) => {
this.setState({ accounts });
};
renderItem = (index, key) => {
const account = this.state.accounts[index];
if (!account) return null; // Handle cases where data might be loading or out of sync
return <div key={key} style={{ padding: '10px', borderBottom: '1px solid #eee' }}>{account.name}</div>;
};
render() {
return (
<div>
<h1>Accounts</h1>
<div style={{ overflow: 'auto', maxHeight: 400, border: '1px solid #ccc' }}>
<ReactList
itemRenderer={this.renderItem}
length={this.state.accounts.length}
type='uniform'
threshold={200}
/>
</div>
<p>Showing {this.state.accounts.length} accounts.</p>
</div>
);
}
}
// Example of how to use it in a parent component (for demonstration)
// function App() {
// return <MyComponent />;
// }
// export default App;
Upgrade
Version history
Breaking-change detection hasn't run for this library yet.
Audit
Security & dependencies
CVE tracking and dependency tree are planned for a later release.