How can you optimize rendering a list of 10,000 items without pagination?

To optimize rendering of a large list of 10,000 items without pagination, virtualization (virtual scroll) can be used. The idea is to render only the elements visible to the user in the current viewport in the DOM, while dynamically loading and removing others as the user scrolls.

Example with React and the react-window library:

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

const Row = ({ index, style }) => (
  <div style={style}>Item #{index}</div>
);

const LargeList = () => (
  <List
    height={500} // container height
    itemCount={10000} // number of items
    itemSize={35} // height of one item
    width={300} // container width
  >
    {Row}
  </List>
);

This approach significantly reduces the load on the browser and improves performance, as only a limited number of elements are present in the DOM at any given time.