Dynamic measurement is still not working
See original GitHub issueHi,
I spent hours on this, but I still don’t believe dynamic measurement is really working in react-virtual. FYI, I read this issue already: #23
This is the example from the doc, but it has hardcoded width and height based on ${virtualColumn.size}px, and ${virtualRow.size}px. The resulting dimensions are controlled by these values and they are not dynamic in this example.
https://codesandbox.io/s/github/tannerlinsley/react-virtual/tree/master/examples/dynamic
In my case, I have fixed column widths and every cell can have dynamic height. I don’t think this is supported. Here are my observations.
-
I tried removing the hardcoded width and height from the example, but as soon as I do so, I get an error that “Maximum update depth exceeded”. It seems it could not calculate the dimensions properly and got stuck in a loop. (Is this a bug?)
-
Removing only the height from the linked example above makes each cell to have the same height. However, this only works only if every cell in the same row has the same height. As soon as I make several cells have different height within the same row, I get the “Maximum update depth exceeded” error again.
It’s dynamic in a sense that each row can have different heights, but not each cell. (And, this is only for using fixed column width. I’m not sure how this would even work if both row and column had dynamic size.) I wouldn’t call this behavior dynamic.
If it works if every cell in the same row has the same height, wouldn’t it possible to take the maximum height in each row use it across all cells in the row? I’m not sure why it crashes with the error.
Issue Analytics
- State:
- Created 2 years ago
- Reactions:1
- Comments:9

Top Related StackOverflow Question
I just ran into this so I’ll add the solution that worked for me. Try setting a maximum width/height on your virtualized elements. If you have virtualized columns set a maximum width and if you have virtualized rows set a maximum height. In my case, I was virtualizing columns and one of the columns was growing to fill the entire available width. When I added the maximum width constraint, the update loop went away, and I was able to diagnose the problem.
We do need to get the examples fixed, but other than that, the dynamic sizing should work just fine. As for the masonry layout features, we’ll likely need to work our way into that in the next major version. Closing for now.