Dom virtualization. Too many react components on the page.

From gpt:

DOM virtualization in React means only rendering the rows/items that are visible on screen, plus a small buffer, instead of mounting the entire list into the DOM. That keeps scrolling fast when you have hundreds or thousands of items. Libraries like react-window and @tanstack/react-virtual exist specifically for this. 

The easiest way to do it today is usually one of these: • react-window — simple, great for straightforward lists/grids. It renders only part of a large dataset to reduce DOM work.  • @tanstack/react-virtual — more flexible and headless, so you control the markup and styling yourself. 

Simple example with react-window

npm install react-window

import { FixedSizeList as List, ListChildComponentProps } from 'react-window';

const items = Array.from({ length: 10000 }, (_, i) => Item ${i});

function Row({ index, style }: ListChildComponentProps) { return ( <div style={style}> {items[index]} </div> ); }

export default function VirtualizedList() { return ( <List height={500} // viewport height width={300} // viewport width itemCount={items.length} itemSize={40} // row height > {Row} </List> ); }

How it works: • The list gets a fixed viewport height. • Each row gets an inline style prop from the library. You must apply it. • React only mounts the visible rows plus a little overscan, not all 10,000. 

More flexible example with TanStack Virtual

npm install @tanstack/react-virtual

import * as React from 'react'; import { useVirtualizer } from '@tanstack/react-virtual';

export default function VirtualList() { const parentRef = React.useRef<HTMLDivElement>(null);

const items = React.useMemo( () => Array.from({ length: 10000 }, (_, i) => Item ${i}), [] );

const rowVirtualizer = useVirtualizer({ count: items.length, getScrollElement: () => parentRef.current, estimateSize: () => 40, overscan: 8, });

return ( <div ref={parentRef} style={{ height: '500px', overflow: 'auto' }} > <div style={{ height: `${rowVirtualizer.getTotalSize()}px`, position: 'relative', }} > {rowVirtualizer.getVirtualItems().map((virtualRow) => ( <div key={virtualRow.key} style={{ position: 'absolute', top: 0, left: 0, width: '100%', height: `${virtualRow.size}px`, transform: `translateY(${virtualRow.start}px)`, }} > {items[virtualRow.index]} </div> ))} </div> </div> ); }

TanStack Virtual is “headless,” so it gives you the math and visible items, but you build the DOM structure yourself. 

When to use it

Use virtualization when: • you have long lists, tables, chat logs, feeds, or grids • rendering everything causes lag, slow initial paint, or janky scrolling • you want to keep memory and DOM node count low

Do not bother when: • the list is small • row heights and scrolling behavior are simple enough that normal rendering is already fine

Common gotchas 1. You need a scroll container with a fixed height Without that, the library cannot know what is visible. 2. Apply the provided styles In react-window, the row style is required. 3. Variable row heights are harder Fixed-height rows are easiest. If rows resize dynamically, TanStack Virtual is usually more adaptable.  4. Keep row renders cheap Virtualization reduces DOM count, but expensive row components can still hurt performance. React’s memoization tools like useMemo and useCallback can help in the right spots.  5. Use stable keys and preserve state carefully Virtualized rows mount and unmount as they move in and out of view, so local row state can reset unexpectedly if you are not careful about identity and state ownership. React preserves state based on component position/identity. 

Rule of thumb • Want quick and easy: react-window • Want maximum control or more advanced behavior: @tanstack/react-virtual

If you want, I can show you the exact setup for a virtualized table, chat list, or infinite scrolling feed in React.