How to implement virtualized list in React
Łukasz Holeczek
Follow Łukasz Holeczek on GitHub
Connect with Łukasz Holeczek on LinkedIn
Follow Łukasz Holeczek on X (Twitter)
Rendering large lists with thousands of items can severely impact performance and cause lag in React applications. As the creator of CoreUI, a widely used open-source UI library, I’ve optimized list rendering for enterprise applications throughout my 11 years of React development. The most effective solution is using virtualization libraries like react-window, which render only the visible items in the viewport. This approach dramatically improves performance by minimizing DOM nodes and reducing memory consumption.
Use react-window’s FixedSizeList component to render only visible items in large lists.
import { FixedSizeList } from 'react-window'
const VirtualList = ({ items }) => {
const Row = ({ index, style }) => (
<div style={style}>
{items[index].name}
</div>
)
return (
<FixedSizeList
height={400}
itemCount={items.length}
itemSize={35}
width='100%'
>
{Row}
</FixedSizeList>
)
}
Here the FixedSizeList component receives the total height of the scrollable area, the number of items, and the height of each individual item. The Row component renders each item using the provided style prop for positioning. React-window calculates which items are visible based on scroll position and only renders those, recycling DOM nodes as you scroll through the list.
Best Practice Note:
This is the approach we recommend for CoreUI data tables when handling large datasets in enterprise applications.
For variable-height items, use VariableSizeList instead, and always memoize row components to prevent unnecessary re-renders during scrolling.
