CardView crashes with "Maximum update depth exceeded"

[SamAdobe]

Provide a general summary of the issue here

When resizing a browser window containing a CardView, React crashes with "Maximum update depth exceeded". See attached sandbox for repro case.

🤔 Expected Behavior?

Card view should resize without crashing

😯 Current Behavior

React crashes.

Uncaught Error: 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.
    at checkForNestedUpdates (react-dom.development.js:27292:11)
    at scheduleUpdateOnFiber (react-dom.development.js:25475:3)
    at dispatchSetState (react-dom.development.js:17527:7)
    at $e1bc15d49d21df0e$export$89be5a243e59c4b2._setContentSize (main.js:583:23)
    at $e1bc15d49d21df0e$export$89be5a243e59c4b2.relayoutNow (main.js:827:14)
    at $e1bc15d49d21df0e$export$89be5a243e59c4b2._setVisibleRect (main.js:613:14)
    at set visibleRect [as visibleRect] (main.js:602:14)
    at Object.eval [as setVisibleRect] (main.js:1385:33)
    at eval (main.js:473:15)
    at eval (main.js:208:13)
    at eval (main.js:218:9)
    at commitHookEffectListMount (react-dom.development.js:23150:26)
    at commitLayoutEffectOnFiber (react-dom.development.js:23268:17)
    at commitLayoutMountEffects_complete (react-dom.development.js:24688:9)
    at commitLayoutEffects_begin (react-dom.development.js:24674:7)
    at commitLayoutEffects (react-dom.development.js:24612:3)
    at commitRootImpl (react-dom.development.js:26823:5)
    at commitRoot (react-dom.development.js:26682:5)
    at performSyncWorkOnRoot (react-dom.development.js:26117:3)
    at flushSyncCallbacks (react-dom.development.js:12042:22)
    at commitRootImpl (react-dom.development.js:26959:3)
    at commitRoot (react-dom.development.js:26682:5)
    at finishConcurrentRender (react-dom.development.js:25981:9)
    at performConcurrentWorkOnRoot (react-dom.development.js:25809:7)
    at workLoop (scheduler.development.js:266:34)
    at flushWork (scheduler.development.js:239:14)
    at MessagePort.performWorkUntilDeadline (scheduler.development.js:533:21)
sandbox.d0600c806.js:2461 The above error occurred in the <ForwardRef($00ca8c0b29e3e07c$var$ScrollView)> component:

    at $00ca8c0b29e3e07c$var$ScrollView (https://c7vc97.csb.app/node_modules/@react-aria/virtualizer/dist/main.js:136:24)
    at $e1fb6f3669e1c329$var$Virtualizer (https://c7vc97.csb.app/node_modules/@react-aria/virtualizer/dist/main.js:360:21)
    at $514a55f6d91f25ef$var$CardView (https://c7vc97.csb.app/node_modules/@react-spectrum/card/dist/main.js:626:74)
    at div
    at div
    at $e81916440cf6fd84$export$ceb145244332b7a2 (https://c7vc97.csb.app/node_modules/@react-spectrum/utils/dist/main.js:745:21)
    at div
    at $6c848be8e8bffe98$var$View (https://c7vc97.csb.app/node_modules/@react-spectrum/view/dist/main.js:41:56)
    at div
    at ProviderWrapper (https://c7vc97.csb.app/node_modules/@react-spectrum/provider/dist/main.js:184:21)
    at $0775ea8ea6a0565e$export$178405afcd8c5eb (https://c7vc97.csb.app/node_modules/@react-aria/overlays/dist/main.js:878:21)
    at $893a66ba513f4a66$export$8214320346cf5104 (https://c7vc97.csb.app/node_modules/@react-spectrum/utils/dist/main.js:210:21)
    at $47fa5ec5ff482271$export$a54013f0d02a8f82 (https://c7vc97.csb.app/node_modules/@react-aria/i18n/dist/real-main.js:162:19)
    at $96cabdf5b0aed55b$var$Provider (https://c7vc97.csb.app/node_modules/@react-spectrum/provider/dist/main.js:124:23)
    at App

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.

💁 Possible Solution

No response

🔦 Context

No response

🖥️ Steps to Reproduce

https://codesandbox.io/s/ecstatic-flower-c7vc97?file=/src/App.js

Resize your window to cause scroll bars to appear and reappear. After a while, React will crash.

Version

3.30

What browsers are you seeing the problem on?

Chrome

If other, please specify.

No response

What operating system are you using?

Windows 10 Enterprise, 21H2 OSX 12.6.8

🧢 Your Company/Team

Adobe - Project Sunrise (3D&I)

🕷 Tracking Issue

No response

[LFDanLu]

Notes for whoever picks this up: possibly the same mode of failure as https://github.com/adobe/react-spectrum/issues/4761

[LFDanLu]

Did some digging, was able to reproduce locally. It is indeed the same mode of failure that we've seen in our other virtualized components aka calculation loops when scrollbars appear and disappear. In this case, as the window resizes, the dynamic height CardView gains a vertical scroll bar because its last calculated height was taller than the space afforded to it by its parent container. This scrollbar causes a resize to happen for the CardView since it takes up room and the CardView recalculates its layout to adapt to the new width set. After it resizes itself, the scrollbar disappears and the CardView tries to resize itself to fill the horizontal space recently vacated by the scrollbar. This results in the CardView reverting back to its larger state and the scrollbar returns, causing a infinite loop to happen.

[LFDanLu]

Note that similar to TableView, we only support CardViews with specified height so the virtualization and async load more can work properly: https://github.com/adobe/react-spectrum/wiki/Frequently-Asked-Questions-(FAQs)#why-do-i-need-a-constrained-height-on-my-react-spectrum-tableview. Let us know if applying a height doesn't fix the issue.

[akirkAdobe]

@LFDanLu I am still able to able to reproduce this issue after applying a height to the CardView. See this edited sandbox: https://codesandbox.io/p/sandbox/laughing-merkle-v674my

Note that I can reliably and easily reproduce the issue on Mac when scrollbars are set to always show.

[LFDanLu]

Thanks for the update, I'll reopen this issue. The comment from https://github.com/adobe/react-spectrum/issues/5152#issuecomment-1804885598 is then still relevant most likely, but I recall this not being a problem locally so I'll have to dig some more.