Ar galima naudoti biblioteką virtualiam slinkimui? Kaip įgyvendinti virtualizaciją naudojant @tanstack/virtual?

Taip, naudoti virtualaus slinkimo biblioteką yra įmanoma ir dažnai būtina, siekiant optimizuoti našumą rodyti didelius sąrašus ar lenteles.

@tanstack/virtual yra šiuolaikinė biblioteka sąrašų virtualizacijai React ir kituose framework'uose. Ji leidžia atvaizduoti tik matomą elementų dalį, sumažindama DOM apkrovą.

Pavyzdys pagrindinės virtualizacijos realizacijos su @tanstack/virtual React:

import React from 'react';
import { useVirtual } from '@tanstack/react-virtual';

function VirtualList({ items }) {
  const parentRef = React.useRef();

  const rowVirtualizer = useVirtual({
    size: items.length,
    parentRef,
    estimateSize: React.useCallback(() => 35, []), // vieno elemento aukštis
  });

  return (
    <div ref={parentRef} style={{ height: `300px`, overflow: 'auto' }}>
      <div style={{ height: `${rowVirtualizer.totalSize}px`, position: 'relative' }}>
        {rowVirtualizer.virtualItems.map(virtualRow => (
          <div
            key={virtualRow.index}
            ref={virtualRow.measureRef}
            style={{
              position: 'absolute',
              top: 0,
              left: 0,
              width: '100%',
              height: `${virtualRow.size}px`,
              transform: `translateY(${virtualRow.start}px)`,
            }}
          >
            {items[virtualRow.index]}
          </div>
        ))}
      </div>
    </div>
  );
}

Šiuo būdu, biblioteka valdo tik matomus elementus, kas žymiai pagerina našumą dirbant su dideliais sąrašais.