React exhaustive dependencies rule flags dependency in Infinite Scroll example

[DemienDrost]

In the React Example: Infinite Scroll (GitHub), there's an example how to fetch from the server while the client is running out of item to show. In the dependency array of the useEffect responsible for fetching more data, there's a function call to rowVirtualizer.getVirtualItems().

My linter (Biome) has a rule for correctness/useExhaustiveDependencies, which flags that dependency and suggests it should be rowVirtualizer.getVirtualItems rather than rowVirtualizer.getVirtualItems(). In most cases that would make sense, however here, it's the function's output on which we want to trigger an update.

Since the getVirtualItems function is memoized in Virtual Core, I suggest the following changes to accommodate this (possibly inappropriate) linter flag, or to at least start discussing this.

virtual/examples/react/infinite-scroll/src/main.tsx:55

+ const virtualItems = rowVirtualizer.getVirtualItems();
  React.useEffect(() => {
-   const [lastItem] = [...rowVirtualizer.getVirtualItems()].reverse()
+   const [lastItem] = virtualItems.reverse()
    if (!lastItem) {
      return
    }

    if (
      lastItem.index >= allRows.length - 1 &&
      hasNextPage &&
      !isFetchingNextPage
    ) {
      fetchNextPage()
    }
  }, [
    hasNextPage,
    fetchNextPage,
    allRows.length,
    isFetchingNextPage,
-   rowVirtualizer.getVirtualItems(),
+   virtualItems,
  ])

I did not feel opening a bug for this was appropriate, however I think a discussion about this will be valuable.