4

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.

Avery
  • 2,270
  • 4
  • 33
  • 35
donp
  • 41
  • 2
  • 3
  • Row count is expected to be the total number of rows in your dataset; this informs VirtualizedTable on how to render the scroll bar. – lux Feb 02 '18 at 18:15
  • 1
    A code example of exactly what isn't working will help people answer your question – Avery Feb 02 '18 at 18:21
  • I suggest looking at the `InfiniteLoader.example.js` and `InfiniteLoader.jest.js` files in this directory for examples of it being used https://github.com/bvaughn/react-virtualized/tree/master/source/InfiniteLoader – bvaughn Feb 02 '18 at 18:30
  • @brianvaughn InfiniteLoader.example.js is the first example that I looked at since it's in the project docs. That example isn't very relevant to a basic AJAX data-loading scenario - the example seems to be tracking data in some sort of loadedRowsMap, and is using fake data with a timeout and Promise. I wasn't able to discern what the various parts of that example were doing, or how to translate that into a more typical AJAX request scenario. For example - what's the purpose of the Promise in the example?; how do you know how many rows of total data?; etc. Can you point to an AJAX examp? – donp Feb 02 '18 at 18:36
  • @brianvaughn I'm looking now at the InfiniteLoader.jest.js, and some parts don't make sense. Specifically: In `describe('InfiniteLoader')`, there is a `defaultIsRowLoaded()` which is testing `return !!isRowLoadedMap[index]` - but `isRowLoadedMap` is never being modified, i.e., nothing is ever being set into it - so how does this work? It isn't clear that the `isRowLoaded` test is doing anything. – donp Feb 02 '18 at 21:20

1 Answers1

10

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"

cfraser
  • 941
  • 6
  • 16
  • 1
    Thank you very much for this. This answer would be a great addition to the docs. This is great info about how to use `loadMoreRows` and `rowCount`. Do you have a general working example with this, or can you explain how `isRowLoaded` fits in, and why some examples show local row management for detecting rows loaded? And, what the meaning of `isRowLoaded` actually is? In some examples it just looks like a test of whether `index` in the local list is non-null, but that would always be the case after the first load, even if the next load wasn't complete. – donp Feb 02 '18 at 20:50
  • Anyone is welcome to submit PRs to improve the docs. (I love PRs like that.) Docs are hard to write and take a ton of time to maintain. WRT your question "what the meaning of `isRowLoaded` actually is"- beyond the obvious, maybe check out this section of the docs: https://github.com/bvaughn/react-virtualized/blob/master/docs/InfiniteLoader.md#tracking-loaded-and-loading-rows – bvaughn Feb 02 '18 at 22:00
  • @cfraser can you please take a look at https://stackoverflow.com/questions/53446274/isrowloaded-and-loadmorerows-not-getting-called-react-virtualized . I have tried all the solutions to make it work still neither of isRowLoaded and loadMoreRows are getting called. – Arjita Mitra Nov 24 '18 at 04:35