Real World Example

Banking apps, Slack/WhatsApp chat history and log viewers show huge lists. Only the rows on screen are rendered.

import { FixedSizeList } from 'react-window';

function Statement({ transactions }) {
  return (
    <FixedSizeList height={500} itemCount={transactions.length} itemSize={40} width="100%">
      {({ index, style }) => {
        const t = transactions[index];
        return <div style={style}>{t.date} — {t.description} — ₹{t.amount}</div>;
      }}
    </FixedSizeList>
  );
}