T
TanStack•11mo ago
vicious-gold

How to update the created virtualizer instead of creating a new one every time an option is changed?

Currently, I'm following the examples to create the vitualizer like this: 
    let rowVirtualizer = $derived(
        createVirtualizer({
            count: rowCount,
            getScrollElement: () => containerRef,
            estimateSize: () => itemWidth,
            overscan: 10
        })
    );
    let rowVirtualizer = $derived(
        createVirtualizer({
            count: rowCount,
            getScrollElement: () => containerRef,
            estimateSize: () => itemWidth,
            overscan: 10
        })
    );
When rowCount changes (like in resizing window event), it will get updated. But it's not performant. Is there a way to update only the options of the same virtualizer instance like this: 
    let rowVirtualizer = (
        createVirtualizer({
            count: rowCount,
            getScrollElement: () => containerRef,
            estimateSize: () => itemWidth,
            overscan: 10
        })

    $effect(() => {
        rowVirtualizer.options.count = rowCount
    })
    let rowVirtualizer = (
        createVirtualizer({
            count: rowCount,
            getScrollElement: () => containerRef,
            estimateSize: () => itemWidth,
            overscan: 10
        })

    $effect(() => {
        rowVirtualizer.options.count = rowCount
    })
0 Replies
No replies yetBe the first to reply to this messageJoin

Did you find this page helpful?