Using TableView at 90% zoom level triggers a re-render loop and errors

[JasonKaz]

Provide a general summary of the issue here

This issue may be 2 different errors, see here.

Original issue here:
When using the TableView component without a height it can sometimes cause a re-render loop which React catches and throws an error.
You can see this behavior in this example: https://codesandbox.io/s/react-spectrum-table-react-error-185-hx7vsw?file=/src/App.js

In that example it is erroring upon filter but we have many reports of customers not even being able to render the table at all. It must be some combination of data within the table, browser, and window size because we cannot replicate the error being thrown in that case.

The CodeSandbox is a typical use case for us using TableViews. We do not set a height or maxHeight because we want the tables to expand and contract depending on the row count and height. Setting a maxHeight would work for us, but we have confirmed that maxHeight alone does not prevent this error from being thrown.

🤔 Expected Behavior?

The table does not throw an error when height or maxHeight are missing.

😯 Current Behavior

It throws an error and crashes the application, or throws an error in an Error Boundary if one is used.

Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.

💁 Possible Solution

Applying a height to the TableView fixes it, but in doing so degrades our user experience.

🔦 Context

No response

🖥️ Steps to Reproduce

Reproduction steps are listed in the following: https://codesandbox.io/s/react-spectrum-table-react-error-185-hx7vsw?file=/src/App.js

Version

3.31.0

What browsers are you seeing the problem on?

Firefox, Chrome, Safari, Microsoft Edge

If other, please specify.

No response

What operating system are you using?

OSX

🧢 Your Company/Team

Adobe/Admin Console

🕷 Tracking Issue

No response

[LFDanLu]

Some notes from digging:

• There are two different crashes happening here. The first is the zoom related one which crashes in the same way as Prevent resize infinite loop in TableView when scrollbars are always on  #4846, aka the visibleRect being set by the Virtualizer is bouncing between two rect values as confirmed here: Tableview crash bug #5380. This can be worked around via https://github.com/adobe/react-spectrum/pull/4981/files
• The second issue illustrated by the codesandbox was introduced in 3.28 via the changes from Fix remaining React strict mode issues #4564. I'm still digging into the changes that make this crash happen in the first place but it is interesting to note that the visibleRect tracked by incrementally decreases in height (aka steps down by 40px, item by item, instead of going from full height to 0) when the items provided to the Table are replaced by an empty array.

EDIT: Second issue specifically introduced with the changes made in this file

[JasonKaz]

Thanks @LFDanLu for noting the difference in errors.

I have finally been able to reproduce the error on initial load of the table which is the first issue you noted. I can confirm that bringing that change in does fix the issue locally for me.

[bmingles]

We are experiencing this issue as well when TableView has min-height: 0; flex: 1 and is inside of a flex column container. Specifically inside of ActionBarContainer, these styles get automatically applied to the TableView child. For our use case, a workaround seems to be to set UNSAFE_style={{ display: 'grid' }} on the ActionBarContainer

[LFDanLu]

@bmingles Does your ActionBarContainer have a static height or a variable height?