bvaughn
CellMeasurer React crash 'Maximum update depth exceeded' with display:none on a List with many elements and cache created in the render function
Bug Report
What is the current behavior?
React crashes with 'Maximum update depth exceeded' when using display:none on a List with many elements and cache created in the render function. It does not happen with few elements, nor if the cache is created outside of the component render function, nor if the cache is created with a minHeight value.
In the following codepen, click on the buttons to change the display property from block to inline-block to none. When using none, it crashes. If you modify the pen by settings the number of elements to 20, or by creating the cache outside of the render function, or by setting the minHeight property when creating the cache, it works
https://codepen.io/jonenst/pen/KKMRadE?editors=0010
What is the expected behavior?
No crash
Which versions of React and react-virtualized, and which browser / OS are affected by this issue? Did this work in previous versions of react-virtualized?
| Browser | firefox 68, chrome 78 |
| OS | linux |
| React | 17.0.1 |
| React DOM | 17.0.1 |
| react-virtualized | 9.22.2 |
I have the same problem. The row height in the List changes in real time, and there is a lot of data. This can happen when a lot of data needs to be rendered at the same time. Also, since our row heights aren't uniform, we're using a CellMeasurer, and because we need to display rows in real time, we need to dynamically change the row height, but I don't know how to refresh a row height in real time or a row, so I cleared MeasurerCach in the DidUpdate
Same problem here, adding a minHeight to the CellMeasurerCache fixed the issue for me. (react-virtualized 9.22.3, react 17.0.2, windows 10, chrome 92.0.4515.159)
Same problem. But setting minHeight does not fix the problem. I can still trigger a crash by scrubbing the scrollbar. (react-virtualized 9.22.5, react 18.2.0, windows 10, firefox 114.0.2)
