react-virtualized InfiniteLoader/List - working example using AJAX

Question

I'm doing a React/Redux project, and need to implement a virtualized/infinite-loading list. react-virtualized seems intended to do the job, but even after reading all of the available docs and reading a number of StackOverflow posts, I haven't been able to get it working or found a clear explanation of the mechanics of how the components actually work.

The primary examples I've looked at are:

https://github.com/bvaughn/react-virtualized/blob/master/docs/creatingAnInfiniteLoadingList.md

https://github.com/bvaughn/react-virtualized/blob/master/docs/InfiniteLoader.md#examples

The primary issues I'm running into are:

1. It's very unclear how the loader is triggered to make a call to loadMoreRows() in the initial load/render case. Typical scenario is that we'd design the component to initialize itself with data by calling loadMoreRows() when it's initially rendered. The config values necessary to make this happen aren't obvious.

2. It's not clear whether the rowCount property is intended to represent the current state of loaded rows (the number of rows in a block/page of data), or the total count of the full set of row data. And, in either case, these can't be known in advance of making the initial AJAX load call, so what's the intention for setting the initial value of rowCount?

I've tried putting the code from various examples into my project, but I never see the loadMoreRows call being made. I think what's need is a fleshed-out example that demonstrates a very typical use case of a) initially rendering an empty List, which then triggers an initial data load call; b) updating the rowCount property, and when/where to do this; c) managing the currently-loaded data set representing the current block/page of data.

Any pointers would be much appreciated.

Answer 1

loadMoreRows is passed as a prop to InfiniteLoader (you can see that in the examples). It isn't meant to be called manually, it is used internally by InfiniteLoader and List, and is called automatically when scrolling down.

rowCount can have both of those behaviours. Your API could tell how many items there are without fetching them all, or it could not. rowCount simply tells List how many rows there are.

So for example, let's say we have 100 stores, and our first fetch gives us the first 10. That same response should say if there are more stores to be fetched still or not. Another fetch could tell us there are 100 stores total. With this, we could use the total of 100 as rowCount (by querying the total number of stores, without fetching them all) OR we could use 10 + 1 as rowCount, as the first fetch told us there were still more stores to be loaded yet.

What would this mean?

If we have the first 10 stores loaded, and use rowCount = 100, InfiniteLoader would display 100 rows, but only the first 10 would have any content at all, with the rest of them showing the "loading" row placeholder component. And as that 'not yet loaded' rows appear as you scroll down, InfiniteLoader would call the loadMoreRows function to, well, load more rows.

In the other hand, if we had used rowCount = 10 + 1, InfiniteLoader would display only 11 rows, with only the last one being the "loading" row placeholder component. And when loadMoreRows is called, rowCount would be items.length + 1 === 20 + 1.

Summing up

loadMoreRows isn't meant to be called manually. It is called automatically by InfiniteLoader when a row that isn't loaded is being shown in the viewport. So initially rowCount could be just 1, no row would be loaded, and loadMoreRows would be called.

rowCount could either be currentItems.length + (moreToBeLoaded ? 1 : 0) or totalItems. The difference being what is shown to the user, either "Oops, end of what is loaded, wait some for more" or "Look, these are all the items there is, but haven't been loaded yet, wait some for them to load"