T
TanStack•2y ago
like-gold

Resizing dynamically sized virtual rows causes jittery behavior

I am using measureElement to virtualize dynamically sized elements. Everything works well but I have one problem when dynamically changing the rows size through conditional rendering. Each row is passed a boolean prop based on some conditions, and when a certain action happens, the row will display/hide some content. When this happens, specifically when the row grows in size (triggering the resizeObserver from measureElement), this behavior is jittery for a split second. It seems that text is displayed on top of each other until it finishes adjusting. Any ideas on how to fix this? This is my virtualizer instance: 
const virtualizer = useVirtualizer({
        count: hasNextPage ? messages.length + 1 : messages.length,
        getScrollElement: useCallback(() => parentRef.current, [parentRef]),
        estimateSize: useCallback(() => 45, []),
        getItemKey: useCallback((index) => messages[index]?.id, [messages]),
        overscan: 5
    });
const virtualizer = useVirtualizer({
        count: hasNextPage ? messages.length + 1 : messages.length,
        getScrollElement: useCallback(() => parentRef.current, [parentRef]),
        estimateSize: useCallback(() => 45, []),
        getItemKey: useCallback((index) => messages[index]?.id, [messages]),
        overscan: 5
    });
0 Replies
No replies yetBe the first to reply to this messageJoin

Did you find this page helpful?