react-virtualized: how to use a separate rowRenderer for height measurement - reactjs

Question

I'm trying to display large text documents with complex markups using the react-virtualized List component. The document is broken up into chunks of text of varying lengths shorter than some maximum. The List component renders each of these chunks as a row.
Since I can't use fixed row heights because chunk lengths vary, I'd like to use CellMeasurer. The problem is that the parsing needed to generate the markups on each chunk is expensive -- this is part of the reason I want to use react-virtualized. Even if all the chunks are rendered in the background, it will still be too slow.
Since the markup does not affect height, I'd like to use a simpler rowRenderer function that renders text without markup only for measuring rows, and then provide a separate and more complete rowRenderer for the actual render of each chunk with markup. Is there a way to do this?

Answer 1

This is admittedly really hacky, and not best practices, but could you do something like:
<List
rowHeight={(index) => {
const rowData = data[index];
let div = document.getElementById('renderer');
if (!div) {
div = document.createElement('div');
div.id = 'renderer';
}
ReactDOM.render(div, <Row>{rowData}</Row>);
const height = div.offsetHeight;
ReactDOM.unmountComponentAtNode(div);
if (index === data.length - 1) {
div.parentNode.removeChild(div);
}
return height;
}}
/>
Or, actually, you could have two lists, one with visibility: hidden, where you just render each row without markup, get the height, and add it to an array. Once the length of the array is equal to your data length, you no longer show it, and then render the other one, with rowHeight={index => heights[index]}

Answer 2

After some trial and error I found a good way to do this is to make the rowRenderer function decide which way to render the row. You can do this by checking the _rowHeightCache property in the CellMeasurerCache instance use use in your list. Note that the keys of _rowHeightCache take the form: "index-0" where index is the row's index.
Here is how you can set up the row renderer:
TextRowRenderer(
{
key, // Unique key within array of rows
index, // Index of row within collection
// isScrolling, // The List is currently being scrolled
style, // Style object to be applied to row (to position it)
parent, // reference to List
},
) {
const { textArray } = this.props;
// get the cached row height for this row
const rowCache = this.listCache._rowHeightCache[`${index}-0`];
// if it has been cached, render it using the normal, more expensive
// version of the component, without bothering to wrap it in a
// CellMeasurer (it's already been measured!)
// Note that listCache.defaultHeight has been set to 0, to make the
// the comparison easy
if (rowCache !== null && rowCache !== undefined && rowCache !== 0) {
return (
<TextChunk
key={key}
chunk={textArray[index]}
index={index}
style={style}
/>
);
}
// If the row height has not been cached (meaning it has not been
// measured, return the text chunk component, but this time:
// a) it's wrapped in CellMeasurer, which is configured with the
// the cache, and
// b) it receives the prop textOnly={true}, which it tells it to
// to skip rendering the markup
return (
<CellMeasurer
cache={this.listCache}
columnIndex={0}
key={key}
parent={parent}
rowIndex={index}
>
{() => {
return (
<TextChunk
key={key}
chunk={textArray[index]}
index={index}
style={style}
textOnly
/>
);
}}
</CellMeasurer>
);
}
This is then passed to the List component in the ordinary way:
<List
height={pageHeight}
width={pageWidth}
rowCount={textArray.length}
rowHeight={this.listCache.rowHeight}
rowRenderer={this.TextRowRenderer}
deferredMeasurementCache={this.listCache}
style={{ outline: 'none' }}
ref={(r) => { this.listRef = r; }}
/>
By including a reference callback, we can now access the
measureAllRows method, which we can use to force the List
to render all rows in advance to get the heights. This will
ensure that the scroll bar functions properly, but even with
the textOnly flag can take a while longer. In my case, I believe
it is worth the wait.
Here is how you can call measureAllRows:
componentDidUpdate() {
const {
textArray,
} = this.props;
// We will only run measureAllRows if they have not been
// measured yet. An easy way to check is to see if the
// last row is measured
const lastRowCache = this
.listCache
._rowHeightCache[`${textArray.length - 1}-0`];
if (this.listRef
|| lastRowCache === null
|| lastRowCache === undefined
|| lastRowCache === 0) {
try {
this.listRef.measureAllRows();
} catch {
console.log('failed to measure all rows');
}
}
}
The try-catch block is needed because if it tries to measure
before the List is constructed it will throw an index-out-of
-bounds error.
FINAL THOUGHTS
Another possible way to do this would be to have the actual List
component be conditional on cached measurements rather than the
rowRenderer function. You could render an array of text as a a
regular list, wrapping each row in a <CellMeasurer>. When the
cache is filled, you would then render a virtual List configured
using the prefilled cache. This would obviate the need to call
measureAllRows in componentDidUpdate or a useEffect callback.