national-gold

Dynamic item sizes causes list to jitter when items are removed

Hey all. Thanks for this amazing library. Ive managed to get my virtual list working in my React app using the useVirtualizer hook. My use case is a chat UI and the virtual list displays messages in a column orientation. Everything works great, and sending messages is smooth. My issue is when I delete a message, depending on where it is in the window, sometimes this deletion is very jittery and sometimes its smooth. All the messages are dynamically sized and my estimate size function returns the size that is for the most common case. There is no hard limit on how big an item is because messages can have multiple rows of content. Here is my visualizer:

const rowVirtualizer = useVirtualizer({
        count: hasNextPage ? messages.length + 1 : messages.length,
        getScrollElement: useCallback(() => parentRef.current, []),
        estimateSize: useCallback(() => 67, []),
        overscan: 5,
    });

const rowVirtualizer = useVirtualizer({
        count: hasNextPage ? messages.length + 1 : messages.length,
        getScrollElement: useCallback(() => parentRef.current, []),
        estimateSize: useCallback(() => 67, []),
        overscan: 5,
    });

Any help would greatly be appreciated!

2 Replies

eastern-cyan•2y ago

Hi, i think you are missing the getItemKey as default key is based on index, when you remove one it will shift the whole array

national-goldOP•2y ago

This fixed the issue. Thank you! Upon further testing, it still occasionally happens, although way less Also i found out that it happens when the deleted message is bigger in height compared to the message below it

Gaming

Programming

Dynamic item sizes causes list to jitter when items are removed

Did you find this page helpful?