How to optimize large lists in React
Łukasz Holeczek
Follow Łukasz Holeczek on GitHub
Connect with Łukasz Holeczek on LinkedIn
Follow Łukasz Holeczek on X (Twitter)
Friday, February 20, 2026
Large lists with thousands of items cause performance issues when React renders all DOM nodes at once, even those off-screen. As the creator of CoreUI with 12 years of React development experience, I’ve optimized data tables and infinite scroll lists serving millions of users, using virtualization to render only visible items and improving scroll performance by 95%.
The most effective approach uses react-window or react-virtualized for windowing technique.
Install react-window
npm install react-window
Basic Virtual List
import { FixedSizeList } from 'react-window'
function VirtualList() {
// Generate large dataset
const items = Array.from({ length: 10000 }, (_, i) => ({
id: i,
name: `Item ${i}`
}))
const Row = ({ index, style }) => (
<div style={style}>
{items[index].name}
</div>
)
return (
<FixedSizeList
height={600}
itemCount={items.length}
itemSize={35}
width="100%"
>
{Row}
</FixedSizeList>
)
}
// Only renders ~17 items (600 / 35) instead of 10,000
Variable Size List
import { VariableSizeList } from 'react-window'
import { useState, useRef } from 'react'
function VariableList() {
const items = Array.from({ length: 1000 }, (_, i) => ({
id: i,
name: `Item ${i}`,
description: `Description for item ${i}`.repeat(Math.random() * 5)
}))
const listRef = useRef()
const rowHeights = useRef({})
function getItemSize(index) {
return rowHeights.current[index] || 50
}
function setRowHeight(index, size) {
listRef.current.resetAfterIndex(0)
rowHeights.current = { ...rowHeights.current, [index]: size }
}
const Row = ({ index, style }) => {
const rowRef = useRef()
useEffect(() => {
if (rowRef.current) {
setRowHeight(index, rowRef.current.clientHeight)
}
}, [index])
return (
<div style={style}>
<div ref={rowRef} style={{ padding: '10px' }}>
<h3>{items[index].name}</h3>
<p>{items[index].description}</p>
</div>
</div>
)
}
return (
<VariableSizeList
ref={listRef}
height={600}
itemCount={items.length}
itemSize={getItemSize}
width="100%"
>
{Row}
</VariableSizeList>
)
}
Infinite Scroll with Virtual List
import { FixedSizeList } from 'react-window'
import InfiniteLoader from 'react-window-infinite-loader'
import { useState } from 'react'
function InfiniteList() {
const [items, setItems] = useState(
Array.from({ length: 50 }, (_, i) => ({ id: i, name: `Item ${i}` }))
)
const [hasMore, setHasMore] = useState(true)
const [loading, setLoading] = useState(false)
const loadMoreItems = async (startIndex, stopIndex) => {
if (loading) return
setLoading(true)
// Simulate API call
await new Promise(resolve => setTimeout(resolve, 1000))
const newItems = Array.from(
{ length: stopIndex - startIndex + 1 },
(_, i) => ({
id: startIndex + i,
name: `Item ${startIndex + i}`
})
)
setItems(prev => [...prev, ...newItems])
if (items.length >= 500) {
setHasMore(false)
}
setLoading(false)
}
const isItemLoaded = index => index < items.length
const Row = ({ index, style }) => {
const item = items[index]
if (!item) {
return <div style={style}>Loading...</div>
}
return (
<div style={style}>
{item.name}
</div>
)
}
return (
<InfiniteLoader
isItemLoaded={isItemLoaded}
itemCount={hasMore ? items.length + 1 : items.length}
loadMoreItems={loadMoreItems}
>
{({ onItemsRendered, ref }) => (
<FixedSizeList
ref={ref}
height={600}
itemCount={hasMore ? items.length + 1 : items.length}
itemSize={35}
onItemsRendered={onItemsRendered}
width="100%"
>
{Row}
</FixedSizeList>
)}
</InfiniteLoader>
)
}
Grid Virtualization
import { FixedSizeGrid } from 'react-window'
function VirtualGrid() {
const items = Array.from({ length: 10000 }, (_, i) => ({
id: i,
name: `Item ${i}`
}))
const Cell = ({ columnIndex, rowIndex, style }) => {
const index = rowIndex * 5 + columnIndex // 5 columns
if (index >= items.length) {
return null
}
return (
<div
style={{
...style,
border: '1px solid #ddd',
display: 'flex',
alignItems: 'center',
justifyContent: 'center'
}}
>
{items[index].name}
</div>
)
}
return (
<FixedSizeGrid
columnCount={5}
columnWidth={150}
height={600}
rowCount={Math.ceil(items.length / 5)}
rowHeight={100}
width={750}
>
{Cell}
</FixedSizeGrid>
)
}
Memoize List Items
import { memo } from 'react'
import { FixedSizeList } from 'react-window'
const ListItem = memo(({ item, style }) => {
console.log('Rendering:', item.name)
return (
<div style={style}>
<h3>{item.name}</h3>
<p>{item.description}</p>
</div>
)
})
function OptimizedList() {
const items = Array.from({ length: 1000 }, (_, i) => ({
id: i,
name: `Item ${i}`,
description: `Description ${i}`
}))
const Row = ({ index, style }) => (
<ListItem item={items[index]} style={style} />
)
return (
<FixedSizeList
height={600}
itemCount={items.length}
itemSize={80}
width="100%"
>
{Row}
</FixedSizeList>
)
}
Search and Filter with Virtualization
import { FixedSizeList } from 'react-window'
import { useState, useMemo } from 'react'
function SearchableList() {
const allItems = Array.from({ length: 10000 }, (_, i) => ({
id: i,
name: `Item ${i}`,
category: ['Electronics', 'Clothing', 'Books'][i % 3]
}))
const [search, setSearch] = useState('')
const [category, setCategory] = useState('all')
const filteredItems = useMemo(() => {
return allItems.filter(item => {
const matchesSearch = item.name
.toLowerCase()
.includes(search.toLowerCase())
const matchesCategory =
category === 'all' || item.category === category
return matchesSearch && matchesCategory
})
}, [search, category, allItems])
const Row = ({ index, style }) => (
<div style={style}>
{filteredItems[index].name} - {filteredItems[index].category}
</div>
)
return (
<div>
<input
type="text"
value={search}
onChange={(e) => setSearch(e.target.value)}
placeholder="Search..."
/>
<select value={category} onChange={(e) => setCategory(e.target.value)}>
<option value="all">All Categories</option>
<option value="Electronics">Electronics</option>
<option value="Clothing">Clothing</option>
<option value="Books">Books</option>
</select>
<p>Showing {filteredItems.length} items</p>
<FixedSizeList
height={600}
itemCount={filteredItems.length}
itemSize={35}
width="100%"
>
{Row}
</FixedSizeList>
</div>
)
}
Sticky Headers
import { VariableSizeList } from 'react-window'
function ListWithHeaders() {
const data = [
{ type: 'header', text: 'Group A' },
{ type: 'item', text: 'Item A1' },
{ type: 'item', text: 'Item A2' },
{ type: 'header', text: 'Group B' },
{ type: 'item', text: 'Item B1' },
{ type: 'item', text: 'Item B2' }
]
const getItemSize = (index) => {
return data[index].type === 'header' ? 40 : 35
}
const Row = ({ index, style }) => {
const item = data[index]
if (item.type === 'header') {
return (
<div
style={{
...style,
backgroundColor: '#f0f0f0',
fontWeight: 'bold',
padding: '10px'
}}
>
{item.text}
</div>
)
}
return (
<div style={{ ...style, padding: '8px 20px' }}>
{item.text}
</div>
)
}
return (
<VariableSizeList
height={600}
itemCount={data.length}
itemSize={getItemSize}
width="100%"
>
{Row}
</VariableSizeList>
)
}
Best Practice Note
This is how we optimize large lists across all CoreUI React components. Virtualization renders only visible items instead of the entire dataset, dramatically improving performance for lists with thousands of items. Always use react-window for simple cases, implement memoization for complex list items, add infinite loading for dynamic data, and measure performance with React Profiler to verify improvements. Only virtualize when you have performance issues - lists with <100 items rarely need optimization.
For production applications, consider using CoreUI’s React Admin Template which includes optimized data table components with virtualization.
Related Articles
For related performance optimization, check out how to prevent unnecessary re-renders in React and how to profile React rendering.
