LazyVStack

'use client';
import { Text, ScrollView } from '@swiftuijs/ui';
import { LazyVStack } from '@swiftuijs/ui';
export default function Example() {
    return ((<ScrollView style={{ height: '400px' }}>
      <LazyVStack spacing={10}>
        {Array.from({ length: 1000 }, (_, index) => ({ id: index + 1, name: `Item ${index + 1}` })).map(item => (<Text key={item.id} style={{ padding: '15px', backgroundColor: 'var(--sw-color-background-secondary)', borderRadius: '8px' }}>
            {item.name}
          </Text>))}
      </LazyVStack>
    </ScrollView>));
}

Usage and limitations

• Use a bounded ScrollView or any ancestor with overflow: auto/scroll; otherwise the page is the scrolling surface.
• estimatedItemHeight defaults to 48 pixels and is corrected with ResizeObserver measurements.
• overscan defaults to four extra rows or columns on each side. Focused items and their neighbors remain mounted for keyboard navigation.
• Use stable React keys. Keep editable state in your application: off-screen items unmount and their local state resets.
• SSR renders an initial 640-pixel window with estimated dimensions; hydration measures the actual viewport and items. It does not emit every item into server HTML.
• Creating the children array still costs O(n); virtualization limits mounted components and DOM nodes. For small collections, use ordinary stacks or grids.