{"id":11742,"library":"react-list","title":"ReactList: Infinite Scroll Component","description":"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.","status":"active","version":"0.8.18","language":"javascript","source_language":"en","source_url":"https://github.com/caseywebdev/react-list","tags":["javascript"],"install":[{"cmd":"npm install react-list","lang":"bash","label":"npm"},{"cmd":"yarn add react-list","lang":"bash","label":"yarn"},{"cmd":"pnpm add react-list","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Core library for ReactList component rendering and lifecycle management.","package":"react","optional":false}],"imports":[{"note":"ReactList is exported as a default export. CommonJS `require` is generally not recommended in modern React projects using ESM.","wrong":"import { ReactList } from 'react-list';\nconst ReactList = require('react-list');","symbol":"ReactList","correct":"import ReactList from 'react-list';"}],"quickstart":{"code":"import React from 'react';\nimport ReactList from 'react-list';\n\n// Mock data loading function\nconst loadAccounts = (callback) => {\n  setTimeout(() => {\n    const accounts = Array.from({ length: 1000 }, (_, i) => ({ id: i, name: `Account ${i + 1}` }));\n    callback(accounts);\n  }, 50);\n};\n\nclass MyComponent extends React.Component {\n  state = {\n    accounts: []\n  };\n\n  componentDidMount() {\n    loadAccounts(this.handleAccounts);\n  }\n\n  handleAccounts = (accounts) => {\n    this.setState({ accounts });\n  };\n\n  renderItem = (index, key) => {\n    const account = this.state.accounts[index];\n    if (!account) return null; // Handle cases where data might be loading or out of sync\n    return <div key={key} style={{ padding: '10px', borderBottom: '1px solid #eee' }}>{account.name}</div>;\n  };\n\n  render() {\n    return (\n      <div>\n        <h1>Accounts</h1>\n        <div style={{ overflow: 'auto', maxHeight: 400, border: '1px solid #ccc' }}>\n          <ReactList\n            itemRenderer={this.renderItem}\n            length={this.state.accounts.length}\n            type='uniform'\n            threshold={200}\n          />\n        </div>\n        <p>Showing {this.state.accounts.length} accounts.</p>\n      </div>\n    );\n  }\n}\n\n// Example of how to use it in a parent component (for demonstration)\n// function App() {\n//   return <MyComponent />;\n// }\n// export default App;","lang":"javascript","description":"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."},"warnings":[{"fix":"Consult the GitHub repository's commit history or changelog (if available) for specific breaking changes between versions.","message":"ReactList uses a 0.x.x versioning scheme. This implies that breaking changes may occur in minor or even patch releases, so always review changelogs when upgrading.","severity":"breaking","affected_versions":">=0.1.0"},{"fix":"Ensure your custom `itemsRenderer` implementation includes `ref={ref}` on its primary container element, e.g., `<div ref={ref}>{items}</div>`.","message":"When using the `itemsRenderer` prop, it is critical to pass the `ref` prop (received as an argument to `itemsRenderer`) to the root DOM element or component that contains the rendered items. Failure to do so will prevent correct item sizing calculations and lead to rendering issues.","severity":"gotcha","affected_versions":">=0.1.0"},{"fix":"Set `type='variable'` when you intend to provide custom item size logic via `itemSizeEstimator` or `itemSizeGetter`.","message":"The `itemSizeEstimator` and `itemSizeGetter` props are only utilized when the `type` prop is set to `'variable'`. Misconfiguring these (e.g., providing them with `type='uniform'`) will result in them being ignored and potentially incorrect list behavior.","severity":"gotcha","affected_versions":">=0.1.0"},{"fix":"Always use `npm install react-list` or `yarn add react-list` for installing the package.","message":"The `README` mentions installation via Bower (`bower install react-list`). Bower is a deprecated package manager and should not be used for new projects. NPM or Yarn are the standard.","severity":"deprecated","affected_versions":"<=0.8.18"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Ensure `this.state.accounts` is properly populated before rendering the list and that `length={this.state.accounts.length}` accurately reflects the current data count. Add a null/undefined check inside `renderItem` for defensive rendering.","cause":"The `length` prop for ReactList might be out of sync with the actual data array, or `renderItem` is called with an `index` for which no data exists.","error":"TypeError: Cannot read properties of undefined (reading 'name') at MyComponent.renderItem"},{"fix":"Ensure the direct parent of `<ReactList />` has a defined height and `overflow: auto` or `overflow: scroll` styles. If a custom scroll parent is used, verify the `scrollParentGetter` correctly returns the scrollable DOM element or `window`.","cause":"The container element for ReactList is missing `overflow: auto` or `overflow: scroll` CSS properties, or the `scrollParentGetter` prop is misconfigured, preventing the list from detecting a scrollable parent.","error":"ReactList is not scrolling or items are not loading as expected."},{"fix":"For variable-sized items, set `type='variable'` and provide an `itemSizeGetter(index)` function that accurately returns the size of the item at that index. If exact sizes are unknown before rendering, consider `itemSizeEstimator`.","cause":"The `type` prop is set incorrectly (e.g., `'uniform'` for variable-sized items) or `itemSizeGetter` is not provided/incorrectly implemented for `type='variable'`.","error":"Items in ReactList have incorrect heights/widths or overlap, especially when their sizes vary."}],"ecosystem":"npm"}