react-virtualized: 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.

About this issue

  • Original URL
  • State: closed
  • Created 8 years ago
  • Comments: 20 (11 by maintainers)

Most upvoted comments

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.