[Question] Is VirtualScroll able to display a constantly changing list? about react-virtualized HOT 9 CLOSED

No problem.

I'm tempted to say that in this case, you should just trigger your own reload for the currently-visible rows (since your component is flushing the cached state). You already have the necessary information to do this if you just tapped into the onRowsRendered callback like so:

<InfiniteLoader
  isRowLoaded={this._isRowLoaded}
  loadMoreRows={this._loadMoreRows}
  rowsCount={list.size}
>
  {({ onRowsRendered, registerChild }) => (
    <AutoSizer disableHeight>
      {({ width }) => (
        <VirtualScroll
          ref={virtScroll => {
            // EDITED #2
            this.virtScroll = virtScroll;
            registerChild(virtScroll);
          }}
          className={styles.VirtualScroll}
          height={200}
          onRowsRendered={({ startIndex, stopIndex }) => {
            this._visibleRowStartIndex = startIndex
            this._visibleRowStopIndex = stopIndex

            onRowsRendered({ startIndex, stopIndex })
          }}
          rowsCount={list.size}
          rowHeight={30}
          rowRenderer={this._rowRenderer}
          scrollToIndex={randomScrollToIndex}
          width={width}
        />
      )}
    </AutoSizer>
  )}
</InfiniteLoader>

Then when you cleared the cache you could kick off reloading for the visible range:

_clearData () {
  this.setState({
    loadedRowsCount: 0,
    loadedRowsMap: {},
    loadingRowsCount: 0
  });

  // EDITED #1
  if (this.virtScroll) {
    this.virtScroll.forceUpdate();
  }

  if (this._visibleRowStartIndex >= 0) {
    this._loadMoreRows ({
      startIndex: this._visibleRowStartIndex,
      stopIndex: this._visibleRowStopIndex
    })
  }
}

from react-virtualized.

Hi @willemx,

Yes. VirtualScroll (or FlexTable) could totally be used as you describe. Any time the rowsCount property changes, the components will automatically update.

If you think there's a chance of an existing row changing then you could just call forceUpdate to make the list redraw its visible rows. If you are making use of the dynamic rowHeight feature and the change may have invalidated the height of the visible rows, then you could call recomputeRowHeights.

Does this answer your question? :)

from react-virtualized.

Yes, thanks!

from react-virtualized.

@bvaughn , thanks for you answer. I've tried it and it really forces rendering. VirtualScroll calls the callback rowRender for each row now. But how to make it also call the callback isRowLoaded? I have a case when I need to invalidate and reload the rows that are currently shown.

from react-virtualized.

@ArtemZag sounds like you're also using the InfiniteLoader HOC?

That is called when the onRowsRendered callback is invoked, which should happen each time a virtual component renders... ah, except that I "memoize" things so the rows rendered callback isn't called a bunch of times with the same values if a user is slow-scrolling.

I guess I'm not clear on your use case to be honest. If you've just invalidated the data by updating it as was originally described in this issue- then can't you manually trigger your isRowLoaded function in that case (if you need to)?

from react-virtualized.

@bvaughn ,
Yes, you are right - I use InfiniteLoader. Sorry I didn't say this before.

can't you manually trigger your isRowLoaded function in that case (if you need to)?

I mean callback isRowLoaded of InfiniteLoader. Not my own function.

I guess I'm not clear on your use case to be honest.

My fault. I'll try to create some small example tomorrow to show you what I mean.

from react-virtualized.

Hi @bvaughn . Sorry for the late answer.
I've created brief example (based on this: https://bvaughn.github.io/react-virtualized/ -> tab "INFINITELOADER")
Here it is: https://github.com/ArtemZag/infinite-loader-example
Take a look at line 82 and 110 of InfiniteLoader.example.js.
My example does the same thing original example does but I also try to reload the data from the source. In my example if you click "Flush data" you'll see list with empty values. But I'd like to force InfiniteLoader to reload the rows. And I have no idea how to do it. Maybe you will help me.

P.S.: It does reload the rows if you scroll the list (even if you scroll just 1 row). But I need to do it on "Flush data" click.

from react-virtualized.

@bvaughn , cool! This is exactly what I need. Than you very much.

from react-virtualized.

Happy to hear :) You're welcome.

On Saturday, February 20, 2016, ArtemZag [email protected] wrote:

@bvaughn https://github.com/bvaughn , cool! This is exactly what I
need. Than you very much.

—
Reply to this email directly or view it on GitHub
#69 (comment)
.

from react-virtualized.