Any suggestion for updating the index to be visible for dynamic list

[spandzgit]

We are using react-virtual for implementing an infinite scroll of large set of records ( in millions ). We have implemented the next set of records fetch based on the scrollPosition and mapping of that to the set of records we fetch. Which works great as we scroll incrementally and also jump scroll to a particular position.

Except when we drag the mouse to the end of the scroll and trying to load the last set of records - works fine if its below the limit of the max possible pixel allowed by browser. For large reports like 5000010 the scroll position stops at the max the browser allows and hence the visible set of records for the virtualizer also stops at that number 838890.

To fix this we are figured out if we use a factor to the scrollPosition and multiply it with the lastScrollPosition received we are able to fetch the last set of records which is record=5000001&limit=500. The virtualizer updates the totalElements and also the elements with the updated 5000001 set of records but the range still stays same around that number 838890.

Is there a way to send that Factor to the virtualizer on scroll to update the scrollOffset so that the range updates and the virtualizer shows the last set of records 5000001...

[piecyk]

hmm, @spandzgit you can manually update scrollOffset and call calculateRange to update what is visible.

Doing this to to sync scroll in prepend infinite scroll to sync scroll https://codesandbox.io/s/beautiful-meninsky-fr6csu?file=/pages/index.js

[spandzgit]

Thanks for the response @piecyk ! We have a scroll handler where we are using debounce to capture the final position of the scroll and that scrollPosition is driving an useEffect() - which in turn fetches the next page fetchNextPage({ pageParam: page }); based on whether its already fetched or not using react infinite query.

Once the updated data comes the virtualizer is getting updated and shows the latest data. Now for this situation where we need to update the scrollOffset and call calculateRange manually to update what is visible - where should we do that?

I was thinking/trying that on the onChange() function of the rowVirtualizer something like -

const rowVirtualizer = useVirtualizer({
  count: contentData.length,
  getScrollElement: () => parentRef.current,
  estimateSize: useCallback(() => LINE_HEIGHT, projectedDataArray),
  overscan: 30,
  debug: true,
  onChange(instance) {
    console.log("State Changed Virtualizer", instance.scrollOffset);
    instance.scrollOffset *= 5;
    instance.calculateRange();
  }
});

[piecyk]

Just fyi, for cases when data changes and we need to sync scroll, this need to happen in same time as data changes, otherwise virtualizer will return items for current offset but new data, and then for when offset changes. So something like this

  const count = React.useMemo(() => {
    if (virtualizerRef.current) {
      const nextOffset =
        virtualizerRef.current.scrollOffset + pageSize * itemSize

      virtualizerRef.current.scrollOffset = nextOffset
      virtualizerRef.current.calculateRange()
      virtualizerRef.current.scrollToOffset(nextOffset, { align: 'start' })
    }

    return rows.length
  }, [rows.length])

Now for this situation where we need to update the scrollOffset and call calculateRange manually to update what is visible - where should we do that?

It depends in what situation, when count changes then would recommend like above. Problem with onChange is this will not be called for every scroll change, but only when range changes.