100k items rendered as 100k DOM nodes will crash any browser. Virtualization is non-negotiable.

1. Virtualize

import { FixedSizeList } from 'react-window';

<FixedSizeList
  height={600}
  itemCount={items.length}
  itemSize={48}
  width="100%"
>
  {({ index, style }) => (
    <div style={style}>
      <Row item={items[index]} />
    </div>
  )}
</FixedSizeList>

Only ~30 rows in the DOM at once. Initial paint drops from seconds to milliseconds.

For dynamic heights: VariableSizeList or TanStack Virtual.

2. Memoize the row

const Row = memo(function Row({ item }: { item: Item }) {
  return <div>{item.name}</div>;
});

When the parent re-renders (filter change, etc.), unchanged rows skip work.

3. Stable keys

If you're not using a virtual list, keys must be ids — never index.

4. Move heavy work off the render path

Sorting/filtering 100k items every render is the next bottleneck.

const filtered = useMemo(
  () => items.filter(predicate).sort(compare),
  [items, predicate, compare],
);

If the predicate/compare are still slow, move into a Web Worker:

self.onmessage = ({ data: { items, query } }) => {
  self.postMessage(items.filter(i => i.name.includes(query)));
};

Main thread stays at 60fps; results stream back.

5. Paginate the data fetch

100k items at once is rarely necessary. Server pagination + infinite scroll loads as needed.

const { data, fetchNextPage } = useInfiniteQuery({
  queryKey: ['items'],
  queryFn: ({ pageParam = 0 }) => fetch(`/items?cursor=${pageParam}`),
  getNextPageParam: last => last.nextCursor,
});

const items = data?.pages.flatMap(p => p.items) ?? [];

6. Index for search

Full-text scan per keystroke is slow. Pre-index:

import Fuse from 'fuse.js';

const fuse = new Fuse(items, { keys: ['name', 'tags'] });
const results = fuse.search(query);

Build the index once (useMemo on items), reuse on every search.

7. Defer non-urgent updates

const [query, setQuery] = useState('');
const deferred = useDeferredValue(query);
const results = useMemo(() => search(deferred), [deferred]);

Input stays responsive; result list lags during heavy work but doesn't block typing.

8. Tables specifically

• Pin header outside the scroll container.
• Sticky column-grouping uses CSS position sticky — works with virtualization.
• For sortable/filterable tables: TanStack Table + TanStack Virtual is the standard.

9. Image-heavy rows

Lazy-load images per row (loading=lazy) so off-screen rows don't fetch.

10. Memory

Even with virtualization, holding 100k objects has a cost. If items are heavy, normalize and store only what the row needs.

Profiling

• React DevTools Profiler: confirm only visible rows render on scroll.
• DevTools Performance: scroll at 60fps; look for long tasks > 50ms.
• Memory tab: check heap snapshot after loading 100k items.

Anti-patterns

• items.slice(0, 100).map(...) and a 'load more' button — unworkable as the threshold for 'enough'.
• CSS overflow scroll on a 100k-row list without virtualization — initial paint blocks for seconds.
• Re-creating the index on every keystroke instead of once.