CODEWITHSUNDEEP
react-virtualized
machineghost
machineghost

Reputation: 35730

How Can I Debug React-Virtualized's InfiniteScroll/Grid Fetching?

I've got a React Virtualized InfiniteList/Grid combination, following the basic pattern from the documentation (https://github.com/bvaughn/react-virtualized/blob/master/docs/InfiniteLoader.md#infiniteloader-and-grid).

It works great, except for two things:

I've tried everything I can to figure out what's going on, and even when I fill the React Virtualized code with console.log and debugger statements I still can't figure out why it stops at 125 results (or why fast scrolls reset).

Can anyone more familiar with React Virtualized point me to the spot in the code where it decides whether to keep fetching or stop (and possibly reset the start index to 0)? I can tell that the InfiniteScroll's onRowsRendered and scanForUnloadedRanges and Grid'sonSectionRendered are involved, but I still can't figure out where the value processing stops and the actual "decide whether to keep going" logic begins.

Upvotes: 1

Views: 980

Answers (1)

machineghost
machineghost

Reputation: 35730

As @brianvaughn's suggested in his comment, the InfinititeLoader component (https://github.com/bvaughn/react-virtualized/blob/master/source/InfiniteLoader/InfiniteLoader.js) is partly responsible. Whenever rows are rendered _loadUnloadedRanges method gets called from scanForUnloadedRanges, and it handles loading the ranges that scanForUnloadedRanges found.

However, that's only part of the equation. The parameters that are passed in to onRowsRendered come from Grid. The Grid _updateScrollTopForScrollToRow method gets called as the user scrolls, and that method has the following line:

const targetIndex = Math.max(0, Math.min(rowCount - 1, scrollToRow))

That targetIndex will ultimately affect which rows get loaded, and as you can see it depends on the rowCount that is passed in initially.

This is what caused problems for me. I started with an InfiniteLoader + List combination, and in that setup a "row" means the same thing to both components. However I then switched to a InfiniteLoader + Grid combination, and to a Grid a "row" is an array of InfiniteLoader rows. In other words, a Grid "row" is a row of cells, but an InfiniteLoader "row" is a cell.

My method for calculating the rowCount was changed to use the Grid definition of a "row", but since it was being passed to InfinniteLoader I should have used InfiniteLoader's definition of a "row" instead. In other words, I should have returned just numItems, not numItems/columnCount.

All this could have easily been avoided if the React Virtualized used an "items" prop for InfiniteLoader instead of using a name that's also used (with two different meanings) by two other React Virtualized components ... but at least now I have a much better understanding of how these components work.

Upvotes: 2

Related Questions