When auto-scrolling to the end in useEffect() while rendering dynamic-sizes-virtual-scrolling, editing the last item would not scroll to the end

[itayperry]

Describe the bug

Hi 🙂,
I've encountered a weird bug and I don't know if it's worth sharing, but I figured I should try (there's of course a CodeSandbox)
I have a dynamic-item-size list (a live chat) and every-time a new message comes along or if the last message updates I update the array and then scroll to the end of the list with useEffect and

virtualizer.scrollToIndex(count - 1)

(You probably wonder why I do it.. I have a live-call-transcription and live-NLP, Natural Language Processing, and I work in an EMS organization that resembles the Red Cross).

I've found out that only if I update the last item in the list, and it makes that last item bigger, the automatic scroll-to-end doesn't work, but if I click the scroll-to-end it does work.

Meaning, the scroller information probably doesn't update fast enough.

Note: If you add a new item the auto-scroll-to-end in useEffect() would work perfectly :)

I've redesigned the scroller so that the bug could be clearer - this is the scroller after adding text to the last array element (it didn't go all the way down):

Your minimal, reproducible example

https://codesandbox.io/p/sandbox/stupefied-herschel-lcyuz8?file=%2Fsrc%2Fmain.tsx&selection=%5B%7B%22endColumn%22%3A13%2C%22endLineNumber%22%3A40%2C%22startColumn%22%3A13%2C%22startLineNumber%22%3A40%7D%5D

Steps to reproduce

Just use the first example of the sandbox in the docs:

https://tanstack.com/virtual/v3/docs/examples/react/dynamic

I created a simple array with 15 text elements:

  const [data, setData] = React.useState(() =>
    new Array(15)
      .fill(true)
      .map(
        () =>
          "Beatae quisquam minus blanditiis assumenda sint nulla eos labore voluptas temporibus sed sed assumenda.just another plain text to, Beatae quisquam temporibus"
      )
  );

That's the code that does auto-scroll to the end:

  React.useEffect(() => {
    if (count >= 0 && data.length && virtualizer) {
      console.log("scroll to end 🥰");
      // requestAnimationFrame(() => {
      virtualizer.scrollToIndex(count - 1);
      // });
    }
  }, [count, data, virtualizer]);

That's the code that updates the last array element (after a 4 seconds delay - using setTimeout):

  React.useEffect(() => {
    const timeoutId= setTimeout(() => {
      setData((item) => {
        const copy = [...item];
        let lastItem = copy[copy.length - 1];
        lastItem = lastItem + " just another plain text to add";
        copy[copy.length - 1] = lastItem;
        return copy;
      });
    }, 4000);
    return () => {
      clearTimeout(timeoutId);
    };
  }, []);

Expected behavior

It seems like the list should scroll to the end immediately after editing the last item if I have a useEffect that auto-scrolls to the end (but I might be mistaken).

How often does this bug happen?

Every time

Screenshots or Videos

No response

Platform

Any platform

tanstack-virtual version

"@tanstack/react-virtual": "3.0.0-beta.54",

TypeScript version

"typescript": "^4.9.5",

Additional context

I solved it by just using requestAnimationFrame

requestAnimationFrame(() => {
    virtualizer.scrollToIndex(count - 1);
});

Terms & Code of Conduct

• I agree to follow this project's Code of Conduct
• I understand that if my bug cannot be reliable reproduced in a debuggable environment, it will probably not be fixed and this issue may even be closed.

[piecyk]

It's timing issue, after updates, when size changes ResizeObserver will trigger update in that time we update measurements that is used when calculating offset for scrollToIndex. Using requestAnimationFrame solves the issue as it push the call after measurements.

[itayperry]

Hi @piecyk,
Is there another way to make it work without requestAnimationFrame?

[tannerlinsley]

Unfortunately, no.