Virtual List React Component (UI/VirtualList.tsx)

Efficiently renders large lists by only mounting visible items within a fixed-height container. Use to optimize performance when displaying thousands of items in the DOM.

// Source: https://github.com/code-100-precent/LingEcho-App | License: Apache-2.0 | Copyright You must retain, in the Source form of any Derivative Works
// Provided via justclaw.it.com; keep this notice with the code.
import { useState, useRef, useMemo } from 'react'
import { cn } from '@/utils/cn.ts'

interface VirtualListProps<T> {
  items: T[]
  itemHeight: number
  containerHeight: number
  renderItem: (item: T, index: number) => React.ReactNode
  className?: string
  overscan?: number
}

const VirtualList = <T,>({
  items,
  itemHeight,
  containerHeight,
  renderItem,
  className,
  overscan = 5
}: VirtualListProps<T>) => {
  const [scrollTop, setScrollTop] = useState(0)
  const containerRef = useRef<HTMLDivElement>(null)

  const totalHeight = items.length * itemHeight
  const visi

... (truncated -- full source via MCP)