What is TanStack Virtual and when should you use it?

TanStack Virtual renders only the DOM nodes visible in the viewport. With thousands of rows, rendering everything creates thousands of DOM nodes causing slow renders, janky scroll, and high memory use. TanStack Virtual computes which items are in view and renders only those plus a small overscan buffer.

<script setup lang="ts">
import { useVirtualizer } from "@tanstack/vue-virtual"
import { ref, computed }  from "vue"

const parentRef=ref<HTMLDivElement|null>(null)
const items=Array.from({length:10_000},(_,i)=>({id:i,name:`Item ${i+1}`}))

const virt=useVirtualizer({
  count:            items.length,
  getScrollElement: ()=>parentRef.value,
  estimateSize:     ()=>40,
  overscan:         5,
})
const vRows  = computed(()=>virt.value.getVirtualItems())
const totalH = computed(()=>virt.value.getTotalSize())
</script>
<template>
  <div ref="parentRef" style="height:500px;overflow-y:auto;">
    <div :style="{ height:`${totalH}px`, position:'relative' }">
      <div v-for="vr in vRows" :key="vr.key"
           :style="{ position:'absolute',top:0,
                     transform:`translateY(${vr.start}px)`,
                     height:`${vr.size}px`,width:'100%' }">
        {{ items[vr.index].name }}
      </div>
    </div>
  </div>
</template>