Při práci s většími datasety v Reactu se limity výkonu projeví poměrně rychle. Renderování stovek nebo tisíců řádků není problém pro JavaScript samotný. Skutečnou zátěží je DOM.

Problém

Každý DOM element zabírá paměť a prohlížeč musí počítat layout, aplikovat styly a provádět reflow operace pro všechny vykreslené prvky. Už kolem 100 až 200 řádků, zvlášť pokud obsahují složitější komponenty, může být znatelné zpomalení.

Typicky se projeví delší initial render, trhané scrollování nebo opožděné reakce na uživatelskou interakci. S rostoucím počtem prvků roste i cena přepočtu layoutu a repaint operací, což může vést k viditelným prodlevám.

Řešení: virtualizace

Virtualizace znamená, že se renderují pouze položky, které jsou aktuálně viditelné v viewportu, případně malý buffer nad a pod nimi.

V React ekosystému se běžně používají knihovny jako react-window nebo @tanstack/virtual, které tuto optimalizaci řeší efektivně a s minimální režií.

import { FixedSizeList } from 'react-window';

const List = ({ items }) => (
  <FixedSizeList
    height={400}
    itemCount={items.length}
    itemSize={35}
    width="100%"
  >
    {({ index, style }) => (
      <div style={style}>
        {items[index]}
      </div>
    )}
  </FixedSizeList>
);

Kdy virtualizovat

• Pokud renderujete více než 100 až 200 položek
• Pokud mají položky složitější strukturu
• Pokud dochází k lagům při scrollování
• Pokud je initial render výrazně pomalý

Virtualizace není univerzální řešení pro každý případ. Přidává určitou komplexitu do implementace. U větších datasetů je ale často nejefektivnějším způsobem, jak udržet aplikaci plynulou a responzivní.