[InfiniteLoader] reloading any rows in the current visible range if necessary is difficult, should be easier
See original GitHub issuehttps://codesandbox.io/s/m41ln6k178
Repro steps:
- Click the “Fake More Recent Item” button
- A “Loading…” row will appear at the top of the list
- Wait a moment. InfiniteLoader should have loaded the content for row 0 already, but it fails to do so
- 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 returnfalse
- 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.
Issue Analytics
- State:
- Created 5 years ago
- Reactions:5
- Comments:6 (5 by maintainers)
Top GitHub Comments
@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 😃
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.