render multipletimes when estimateSize is not the same as real dom size

[fallenleavesguy]

Describe the bug

If the estimateSize is not equal to the actual height of the DOM nodes, it will return two different items (rowVirtualizer.getVirtualItems()) in the same frame, causing two requests for loading more data within the same frame. However, react-query has not had time to update the isFetchingNextPage variable.

Your minimal, reproducible example

https://codesandbox.io/p/sandbox/render-twice-and-request-twice-o93msp

Steps to reproduce

1. scroll to bottom to trigger loadmore.
2. if you change estimateSize from 32 to 36(real height), it will be fine.
3. or you can try remove ref={virtualizer.measureElement} to make it work fine

Expected behavior

return the same items or tell me how to awoid it

How often does this bug happen?

Every time

Screenshots or Videos

No response

Platform

all platforms

tanstack-virtual version

4.0.0-beta.54

TypeScript version

No response

Additional context

No response

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.

[fallenleavesguy]

help me please.crying

[ZakisM]

@fallenleavesguy You can try taking lastItem out into state like this:

  const [lastItem, setLastItem] = React.useState([...rowVirtualizer.getVirtualItems()].reverse());

  React.useEffect(() => {
    const [lastItem] = [...rowVirtualizer.getVirtualItems()].reverse();
    setLastItem(lastItem);
  }, [rowVirtualizer.getVirtualItems()]);

  React.useEffect(() => {
    if (!lastItem) {
      return;
    }

    if (
      lastItem.index >= allRows.length &&
      hasNextPage &&
      !isFetchingNextPage
    ) {
      console.log("request fetching in VirtualList");
      fetchNextPage();
    }
  }, [
    hasNextPage,
    fetchNextPage,
    allRows.length,
    isFetchingNextPage,
    lastItem,
  ]);

[fallenleavesguy]

@fallenleavesguy You can try taking lastItem out into state like this:

  const [lastItem, setLastItem] = React.useState([...rowVirtualizer.getVirtualItems()].reverse());

  React.useEffect(() => {
    const [lastItem] = [...rowVirtualizer.getVirtualItems()].reverse();
    setLastItem(lastItem);
  }, [rowVirtualizer.getVirtualItems()]);

  React.useEffect(() => {
    if (!lastItem) {
      return;
    }

    if (
      lastItem.index >= allRows.length &&
      hasNextPage &&
      !isFetchingNextPage
    ) {
      console.log("request fetching in VirtualList");
      fetchNextPage();
    }
  }, [
    hasNextPage,
    fetchNextPage,
    allRows.length,
    isFetchingNextPage,
    lastItem,
  ]);

@ZakisM Thank you. Yes.Works well but why.Could you tell me.
here's fixed demo
https://codesandbox.io/p/sandbox/fixed-render-twice-and-request-twice-491uz3

[fallenleavesguy]

I see.the last item object didn't change in the same frame.thanks
here is the new demo.

[fallenleavesguy]

React.useState([...rowVirtualizer.getVirtualItems()].reverse());

React.useState([...rowVirtualizer.getVirtualItems()].reverse());

to

React.useState([...rowVirtualizer.getVirtualItems()].reverse()[0]);