virtual scroll with dynamic data cuts off

[shakdoesgithub]

In my virtual scroll the items stop rendering when I have scrolled down after a few hundred pixels.
The items are generated dynamically on a 500ms interval

export class Infinite extends Component {
  constructor(props) {
    super(props);
  }

  state = {
    items: [{id:1}]
  }
  componentDidMount() {
    setInterval(() => {
      var items = this.state.items;
      items.push({id:items.length + 1});
      this.setState({items:items})
    }, 500)
  }

  render () {
    var list = this.state.items
    return (
      <VirtualScroll
        ref="virtualScroll"
        width={300}
        height={300}
        rowsCount={list.length}
        rowHeight={20}
        className="virtualScroll"
        rowRenderer={
          index => {return(<div key={list[index].id}>{list[index].id}</div>)}
        }
      />

    )
  }
}

[bvaughn]

Hi @shakdoesgithub,

Please provide me with a test case that reproduces your problem. As it is my best guess is that you forgot to require/import the react-virtualized/styles CSS required for positioning of windowed cells.

[shakdoesgithub]

@bvaughn that might be it. Where is that CSS at? I guess that's where the confusion is.

[bvaughn]

The examples in the docs should all show it (if not please let me know) but you can require it like so:

import { VirtualScroll } from 'react-virtualized';
import 'react-virtualized/styles.css'; // only needs to be imported once

I'm going to mark this issue as closed for now because I'm pretty sure that's the cause. If not we can still keep talking on this ticket. :)

[alexandergunnarson]

I'm having this issue too — basically I can't scroll beyond around 40-60 items on a 500px by 500px list view (VirtualScroll). Is it possible to just include the react-virtualized/styles.css as the src to a <style> element, or does it need to be imported?

Correction: it's 300px by 300px, with a rowHeight of 20. In the rowRenderer function I'm only returning text to make it simple.

[alexandergunnarson]

Never mind — adding it into a <style> element worked for me.

[bvaughn]

Glad to hear. :)

[shakdoesgithub]

@bvaughn I think the issue was not knowing that the CSS was a necessity. If the readme made that more clear I think we can avoid issues like this.

[bvaughn]

Documentation is hard I guess. All of the code samples show styles being included:

import 'react-virtualized/styles.css'; // only needs to be imported once

I just updated the "getting started" section of the README to hopefully make it even more clear. Let me know if you think this helps. :)

[alexandergunnarson]

I think you've done a great job with your documentation — I just think that there's a tendency among us developers to look at a .css and think "this is totally optional". Maybe you could add "required" in the comment where it says "only needs to be imported once"? Either way, thanks for helping and being so responsive!

[bvaughn]

Ah, yeah. That's a fair point. I can understand that. :)

Thank you! No problem.

[ConAntonakos]

This seems to be happening to me as well even after I included react-virtualized/styles.css.

As I scroll down, it eventually cuts off and is blank. Then, I try and scroll up/down a little jittery to "force" the component, and I notice new rows being loaded in, but still at the maximum point of the scroll position where it had been cut off. I hope that makes sense.

So, once I reach the cutoff point, rows won't fill out the rest of the scroll, I can see new rows loading in from where it got cut off.

Here's my render method:

  render() {
    let rows = [...this.props.rows];

    if (this.props.shouldRowsBeFilled && rows.length < 10) {
      let numRemainingRows = 10 - rows.length;
      Array(numRemainingRows).fill(Array(this.props.columns.length).fill(``)).forEach(fillerRow => {
        rows.push(fillerRow);
      })
    }

    let tableRows = rows.map((row, index)=>{
      // return 'hi';
      return <TableRow key={index} columns={this.props.columns} row={row} />;
    });

    return (
      <ReactVirtualized.AutoSizer disableHeight>
        {({ height, width }) => (
          <ReactVirtualized.List
            height={300}
            rowCount={tableRows.length}
            rowHeight={40}
            rowRenderer={({ index, isScrolling, key, style }) => {
              console.log({ rows, index })
              return (
                <div key={key} style={{style}}>
                  { tableRows[index] }
                </div>
              );
            }}
            width={width}
          />
        )}
      </ReactVirtualized.AutoSizer>
    );
  }

<TableRow /> is essentially an element with flexbox styles.

What am I possibly doing wrong?

[bvaughn]

Looks like you're cloning your rows array (let rows = [...this.props.rows];) and pre-rendering all of the elements in your List- both of which cut into the performance gains offered by react-virtualized. I don't know why you're cloning the rows array, but your rowRenderer should be something more like this:

rowRenderer={({ index, key, style }) => (
  <TableRow
    columns={this.props.columns}
    key={key}
    row={row}
    style={style}
  />
)}

Normally what you're describing happens when you forget to include the styles CSS file (for react-virtualized versions 1-7) or when you forget to attach the style attribute to your rendered row (for react-virtualized version 8).

Point me at a Plnkr (or similar) and I'll be happy to take a look. Or you could try reaching out on Stack Overflow.

[ConAntonakos]

Thanks for the quick response, @bvaughn! Right; I need to optimize that block of logic better, but I've removed it right now to hone in on the issue I'm having.

I posted here b/c it seems I'm experiencing something similar as the author of this issue, but I can move to Stack Overflow if you prefer.

Also, I'm fetching data and passing it into a react-virtualized wrapped table component, I'm not sure if that changes the approach significantly.

It seems the scrolling also causes the rows to "jump". I'll create a Plunker to further explain.

Here's a screenshot of my results:

[ConAntonakos]

Here is my Plunker: https://plnkr.co/edit/i2JH233qyw6u47KDSsKI?p=preview (Edit: Added ES6 + JSX syntax. Sorry about that!)

I hope this clears up the issue I'm having. Thank you again for your time, @bvaughn!

[bvaughn]

You can share the ES6+JSX syntax via Plnkr, FWIW. Would be a bit easier to read than this.

Looks like you aren't passing through the style prop to your rendered DOM elements. (You're passing it to TableRow but TableRow isn't attaching it to the <div> it renders.

// Change this...
      { key: index, className: 'flexbox-table-row-item' },
// To this...
      { key: index, className: 'flexbox-table-row-item', style },

[ConAntonakos]

Sorry for the ES5 Plnkr; fixed that for future reference.

I was passing it to the row itself rather than each row item. I don't quite understand that yet, but I'd like to. It also messes with my flexbox styles, so I'll have to configure that some more. Thank you again a thousand times!

Edit: Nevermind; I don't think I was simply passing the style object properly. I was able to add to the row parent itself.