2

I am trying to mock Facebook feed like scroller in my application with react-virtualized. I am following the reference from here. I am trying to load two feeds at a time and after that loadMoreRows would be called to fetch the next two. I have hardcoded my feed size to 10 for testing purpose. It works well till 4th feed. Then I am not able to move after that smoothly. rowRenderer is triggering the numbers again and again which results in vibration effect on the screen. If I somehow move to the 10th feed and I scroll back, rowRenderer starts from 0 again. I assume it is due to varying height. Similar to the reference, I have used CellMeasurerCache and CellMeasurer to find the dynamic height and width and passing that to list.

class Scroller extends React.Component {
  _cache = new CellMeasurerCache({ defaultHeight: 100, fixedWidth: true });
  _resizeAllFlag = false; 
  _mostRecentWidth = 0;
  constructor(props) {
    super(props);
    this.state = {
      localCache: []
    }
  }
  componentDidMount(){
    this._loadData(0); 
  }
  componentDidUpdate(prevProps, prevState) {
    console.log(this._list);
    if(this._resizeAllFlag){
      this._resizeAllFlag = false;
      this._cache.clearAll();
      this._recomputeRowHeights();
    } else if(this.state.localCache !== prevState.localCache) {
      this._cache.clear(index, 0);
      this._recomputeRowHeights(index);
    }
  }
  ._loadData = (offset, callback) => {
    //Loads data from server and sets it in this.state.localCache
  }
  _recomputeRowHeights = (index) => {
    if (this._list) {
      console.log('Recomputing');
      this._list.recomputeRowHeights(index);
    }
  }
  _isRowLoaded = ({ index }) => {
    return !!this.state.localCache[index];
  }
  _loadMoreRows = ({ startIndex, stopIndex }) => {
    this._loadData(startIndex, (() => promiseResolver));
    let promiseResolver;
    return new Promise((resolve) => {
      promiseResolver = resolve;
    });
  }
  rowRenderer = ({ index, key, style, parent }) => {
    const row = this.state.localCache[index];
    let content;
    if (row) {
      content = (<Feed data={row}/>);
    } else {
      content = (<CustomLoader />);
    }
    return (
      <CellMeasurer
        cache={this._cache}
        columnIndex={0}
        key={key}
        parent={parent}
        rowIndex={index}
        width={this._mostRecentWidth}
      > 
        {content} 
      </CellMeasurer>);
  }
  _setListRef = (ref) => {
    this._list = ref;
    this._registerList(ref);
  };
  _resizeAll = () => {
    this._resizeAllFlag = false;
    this._cache.clearAll();
    if (this._list) {
      this._list.recomputeRowHeights();
    }
  };
  render() {
    const { localCache } = this.state;
    return (
      <div className="flex_grow">
        <InfiniteLoader
          isRowLoaded={this._isRowLoaded}
          loadMoreRows={this._loadMoreRows}
          rowCount={10}
        >
          {({ onRowsRendered, registerChild }) =>
            <AutoSizer disableHeight>
              {({ width, height }) => {
                if (this._mostRecentWidth && this._mostRecentWidth !== width) {
                  this._resizeAllFlag = true;
                  setTimeout(this._resizeAll, 0);
                }
                this._mostRecentWidth = width;
                this._registerList = registerChild;
                return (
                  <List
                    deferredMeasurementCache={this._cache}
                    overscanRowCount={1}
                    ref={this._setListRef}
                    height={height}
                    onRowsRendered={onRowsRendered}
                    rowCount={10}
                    rowHeight={this._cache.rowHeight}
                    rowRenderer={this.rowRenderer}
                    width={width}
                  />
                ) 
              }
              }
            </AutoSizer>}
        </InfiniteLoader>
      </div>
    );
  }
}

Update

I might have deleted style props in content that is being passed. As per @Adrien's suggestion, I added it. My issues were not solved after adding style props.

rowRenderer = ({ index, key, style, parent }) => {
  const row = this.state.localCache[index];
  let content;
  if (row) {
    content = (<Feed style={style} data={row}/>);
  } else {
    content = (<CustomLoader style={style}/>);
  }
  return (
    <CellMeasurer
      cache={this._cache}
      columnIndex={0}
      key={key}
      parent={parent}
      rowIndex={index}
      width={this._mostRecentWidth}
    > 
      {content} 
    </CellMeasurer>);
} 

And my Feed component

class Feed extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    const { style } = this.props;
    return (
      <div className="flex_grow" style={style}>
        {/* Feed related JSX */}
      </div>
    );
  }
}

My components seems to be overlapping. What could have been wrong?

AnswerGist: https://gist.github.com/beb4/cc91f4e9b8982d172613cff248090769

1 Answer 1

1

You forgot to pass the rowRenderer style in your content component. According to the docs, this style is mandatory to position your row.

Corrected rowRenderer

rowRenderer = ({ index, key, style, parent }) => {
    const row = this.state.localCache[index];
    let content;
    if (row) {
      content = (<Feed data={row} style={style} />); // <== HERE
    } else {
      content = (<CustomLoader style={style} />); // <== AND HERE
    }
    return (
      <CellMeasurer
        cache={this._cache}
        columnIndex={0}
        key={key}
        parent={parent}
        rowIndex={index}
        width={this._mostRecentWidth}
      > 
        {content} 
      </CellMeasurer>
    );
}
9
  • Thanks for the help. I initially had style. Somehow, on editing I might have removed it. I added again as you suggested. Even with the style props added, I got the same issue. Commented Aug 10, 2017 at 12:38
  • @user2193672 Do you apply the style props on your root node inside your Feed component? Can you paste your code? Commented Aug 10, 2017 at 12:39
  • Yes. I passed style props to my Feed and CustomLoader , instead of passing to the CellMeasurer as you suggested. Have updated the question with it. Commented Aug 10, 2017 at 12:43
  • @user2193672 What I mean by applying style is not just passing the style props but handling it in the Feed component. Can you paste your Feed component? (only the render) Commented Aug 10, 2017 at 13:10
  • 1
    Let us continue this discussion in chat. Commented Aug 10, 2017 at 13:33

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.