recomputeRowHeights is not always re-rendering

recomputeRowHeights() is not re-rendering some of the VirtualScroll cells properly, even though the function passed to rowHeight is receiving a proper value and I call recomputeRowHeights(index) when the height changes.

Mostly it happens to cells which contains an image, which means their height changes. Less often it happens to rows without it. So basically I would say not all rows that need re-rendering are re-rendered.

Also, sometimes the cell gets re-rendered, but the height does not get updated. I know this because I show the height in the cell and it doesn’t match the actual height.

I’m storing the row height in a heights object, which has been filled with id: height pairs from dimensions received by react-measure component. The rowHeight gets returned from that.

I tried adding a prop to VirtualScroll that counts the number of height updates, and thus is different every time, but that does not help either.

[bvaughn]

When resize is requested, your VirtualList component is logging “not yet!”, meaning that it isn’t passing this call through to VirtualScroll. Since VirtualScroll is pre-rendering a few rows below (overscanRowCount) this means that those rows are never getting remeasured. If you set overscanRowCount={0} on the inner VirtualScroll you can see that they do get updated as you scroll- but still not the first visible set.

Here’s a fixed version: https://plnkr.co/edit/lTFmKOQlJLIehL1LIY47?p=preview

The key basically boiled down to checking to see if any heights had been recomputed before the ref was set, and letting VirtualScroll know about them on-ref-set.

[bvaughn]

Sorry @wmertens. Didn’t mean to ignore. Traveling in Japan at the moment and have spotty Internet access. 😃

I understand your confusion. Let me try to address the things you mentioned briefly.

• cellRenderer and children: Child functions are pretty powerful when it comes to composition. Without then, it would be very hard to combine HOCs like InfiniteLoader, AutoSizer, CellMeasurer, etc because each would essentially have to be aware of the properties/methods of the others in order to pass things through correctly. I initially did this (children instead of child functions) and things were greatly simplified when I made the switch. (This change was made in version 5.0.0 so you can look at an older release if you’re curious what the signatures used to look like.)
• column/rowCount: It isn’t mean to be magical. 😃 In order for CellMeasurer to report the measured height of a row, it needs to measure all columns in the row and take the max. Ditto for the width of a column (need to measure that column in all rows and take the max).
• Why is CellMeasurer a parent of Grid? Because Grid needs a function that returns a cell’s width or height. That function is passed as a parameter to the child function of CellMeasurer. I agree it’s a little counter-intuitive at first, since the cells measured are inside of the Grid but I am not sure of another way to accomplish this. 😃
• Passing props called e.g. getColumnWidth …: Naming is hard. This is why I write lots of docs. I’d be willing to change the name, except that doing so would require a major release (since it would be non-backwards compatible) so it seems … not worth it. 😃