react-virtualized Infinite scroller issues with dynamic height - reactjs

Question

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

Answer 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>
);
}