React-virtualized: [InfiniteLoader] reloading any rows in the current visible range if necessary is difficult, should be easier

[jedwards1211]

https://codesandbox.io/s/m41ln6k178

Repro steps:

1. Click the "Fake More Recent Item" button
2. A "Loading..." row will appear at the top of the list
3. Wait a moment. InfiniteLoader should have loaded the content for row 0 already, but it fails to do so
4. Scroll a bit -> InfiniteLoader will then load the content for row 0

I have an infinite list sorted by most recent and I want to make the list load newer items at the top when I get an event that new items have been created.

I'm trying to accomplish this by doing the following:

• push my data down one row
• ensure isRowLoaded(0) will now return false
• call InfiniteLoader.resetLoadMoreRowsCache()
• call List.forceUpdateGrid()

But Grid's memoization of onRowsRendered prevents it from calling InfiniteLoader.onRowsRendered, so InfiniteLoader never even rechecks if row 0 is loaded until I scroll around. All of this memoization is one big headache.

UPDATE: I worked around this by calling the onRowsRendered passed to my child function with ({startIndex: 0, stopIndex: 0}). (This of course only works after calling resetLoadMoreRowsCache(). This took me a while to figure out though and I think it should be easier for developers. (At the very least, the memoiziation in InfiniteLoader seems totally pointless)

IMHO if Grid re-renders the current rows (due to forceUpdate, shallow equal prop changes, etc.), it should call onRowsRendered again, even if it passes the same range as the previous call.

[jedwards1211]

(Update) I added a sandbox to illustrate the problem.

[skeithyip]

Rather late here. But I too encounter the same problem.

How aboot resetLoadMoreRowsCache(true) ?

Having the autoReload to true, it will force the list to be rechecked.

I am also using InfiniteLoader with Grid. Things get a bit hairy when Redux is added to the mix. My row index is moving around due to the requirement of pivot. (i know i know) Now I am wondering whether loadedRowsMap should stay in Redux.

[nodejh]

@jedwards1211 I have the same issue.

[jedwards1211]

I'm skeptical that resetLoadMoreRowsCache or any instance method for that matter is the most convenient or robust solution...

[jedwards1211]

Since I will only ever have a contiguous loaded range of rows and never plan to evict a row from the middle of the loaded rows, I will probably just write my own alternative to InfiniteLoader that keeps track of the loaded range itself.

[jedwards1211]

@nodejh @skeithyip in case you guys are interested, here's what I'm using now instead of InfiniteLoader: https://gist.github.com/jedwards1211/684500774eb2ff76dbb21bb9d9500716
Not like I can guarantee there are no bugs in this, but it seems to work pretty well so far.

I kept it super simple: it only keeps one contiguous range of rows in memory, and only fetches one batch of more rows at a time.

Since my infinite lists are all based upon Relay-style connections in GraphQL, I just made this hook do the querying directly in response to scrolling. It's even got some slick code that analyzes the query AST to automatically figure out which field is the connection and what the pagination variables are 😃