6

I'm trying to use InfiniteLoader from the react-virtualize library to show up a scrollable list that has a textSearch input field on top (used to filter list entries).

The code I use is very close to the InfiniteLoader Sample Code. The list is working fine, but I'm not sure how to reset/initialize the InfiniteLoader when the searchText is changed and (completely) new data should be shown.

The flow is like this:

  1. the list is opened for the first time and shows data from the redux store (works fine).
  2. user changes textSearch and new data is fetched to the store
  3. at this point, InfiniteLoader should be be initialized (I tried calling resetLoadMoreRowsCache on InfiniteLoader)
  4. InfiniteLoader should call loadMoreRows like for the first time and rerender with the new data

I've seen that the INFINITELOADER DEMO has the same behaviour: by clicking 'Flush Cached Data' nothing happens until I start scolling the list.

So my question: what is the right way to reset/initialize?

PeteMeier
  • 521
  • 1
  • 6
  • 18

1 Answers1

7

For newer versions of InfiniteLoader

Since this question has been posted, InfiniteLoader has gained a parameter which auto-reloads the data. You can now use:

infiniteLoaderRef.resetLoadMoreRowsCache(true);

to automatically flush the cache and get new rows.

For older versions of InfiniteLoader

InfiniteLoader reacts to a range of rows being rendered. The resetLoadMoreRowsCache method just resets cached data. It doesn't automatically request a batch of rows be loaded.

Arguably it should. I don't know. It seemed easy enough for user code to auto-load the first batch of new data if the application state has changed in such a way as to require resetLoadMoreRowsCache to be called.

Anyway, tl;dr is that you should be able to do this:

infiniteLoaderRef.resetLoadMoreRowsCache(); // Reset the cache

loadMoreRows({ // Manually kick off the first batch
  startIndex: 0,
  stopIndex: 20 // Or whatever
});

Happy to review a PR to change the default behavior if you feel it could be improved.

Downgoat
  • 13,771
  • 5
  • 46
  • 69
bvaughn
  • 13,300
  • 45
  • 46
  • thanks for your clarifications (and for this great library too!). your suggestions combined with a call to the `recomputeRowHeights` - method of `List` did it. thanks again – PeteMeier May 09 '17 at 07:44
  • 2
    The method suggested above to reset the cache has been updated to allow for auto-reloading now, the new method signature is `resetLoadMoreRowsCache (autoReload: boolean = false)`. This removed the need to manually kick off the first batch as suggested in this answer. – Hans Roerdinkholder Nov 12 '18 at 10:24
  • Hi Hans I'd like to clarify what you are saying for other readers as I misinterpreted. The autoReload boolean being true will reload the previously data request so if you were in view of 40-60 it would reload 40-60 rather than 0-60. – nrmad Jul 07 '21 at 11:19
  • There is also a prop now, `resetloadMoreItemsCache`, that takes a boolean parameter. – Darya Balu Jul 20 '23 at 16:31