Máme tabulku s 10 000 řádky, která při vykreslování začíná zpomalovat. Proč se to děje a jak to opravit?

Vykreslení tabulky s 10 000 řádky způsobuje zpoždění kvůli velkému počtu prvků DOM, což výrazně zatěžuje prohlížeč a zpomaluje vykreslování.

Jak to opravit:

• Virtuální zobrazení seznamu (virtuální posuv) — vykreslovat v DOM pouze viditelnou část tabulky, načítat řádky při posunu.
• Stránkování — rozdělit data na stránky, zobrazovat omezený počet řádků najednou.
• Optimalizace vykreslování — používat memoizaci, vyhýbat se zbytečnému překreslování.

Příklad použití virtuálního posuvu s React a react-window:

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

const Row = ({ index, style }) => (
  <div style={style}>Řádek {index}</div>
);

<List
  height={500}
  itemCount={10000}
  itemSize={35}
  width={300}
>
  {Row}
</List>