ListView Virtualizer crashes while scrolling frequently updated data

[bmingles]

Provide a general summary of the issue here

There are certain scenarios where scrolling a ListView with frequently updating items can crash the component. The error is:

Uncaught TypeError: Cannot read properties of undefined (reading 'key')
    at $4e8b0456ef72939f$export$9610e69494fadfd2 (useGridListItem.ts:75:15)
    at $d7c07ca2efc5ba02$export$c6bde0c04b033c0e (ListViewItem.tsx:72:7)
    at renderWithHooks (react-dom.development.js:14985:18)
    at mountIndeterminateComponent (react-dom.development.js:17811:13)
    at beginWork (react-dom.development.js:19049:16)
    at HTMLUnknownElement.callCallback2 (react-dom.development.js:3945:14)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:3994:16)
    at invokeGuardedCallback (react-dom.development.js:4056:31)
    at beginWork$1 (react-dom.development.js:23964:7)
    at performUnitOfWork (react-dom.development.js:22776:12)
    at workLoopSync (react-dom.development.js:22707:5)
    at renderRootSync (react-dom.development.js:22670:7)
    at performSyncWorkOnRoot (react-dom.development.js:22293:18)
    at react-dom.development.js:11327:26
    at unstable_runWithPriority (scheduler.development.js:468:12)
    at runWithPriority$1 (react-dom.development.js:11276:10)
    at flushSyncCallbackQueueImpl (react-dom.development.js:11322:9)
    at flushSyncCallbackQueue (react-dom.development.js:11309:3)
    at flushSync (react-dom.development.js:22467:7)
    at ScrollView.tsx:79:5
    at HTMLUnknownElement.callCallback2 (react-dom.development.js:3945:14)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:3994:16)
    at invokeGuardedCallback (react-dom.development.js:4056:31)
    at invokeGuardedCallbackAndCatchFirstError (react-dom.development.js:4070:25)
    at executeDispatch (react-dom.development.js:8243:3)
    at processDispatchQueueItemsInOrder (react-dom.development.js:8275:7)
    at processDispatchQueue (react-dom.development.js:8288:5)
    at dispatchEventsForPlugins (react-dom.development.js:8299:3)
    at react-dom.development.js:8508:12
    at batchedEventUpdates$1 (react-dom.development.js:22396:12)
    at batchedEventUpdates (react-dom.development.js:3745:12)
    at dispatchEventForPluginEventSystem (react-dom.development.js:8507:3)
    at attemptToDispatchEvent (react-dom.development.js:6005:3)
    at dispatchEvent (react-dom.development.js:5924:19)
    at unstable_runWithPriority (scheduler.development.js:468:12)
    at dispatchUserBlockingUpdate (react-dom.development.js:5894:5)

Note that this seems to be the same error and may be related to #6298

🤔 Expected Behavior?

Virtualizer should not crash when scrolling.

😯 Current Behavior

Virtualizer crashes when scrolling when items update frequently.

💁 Possible Solution

This seems to be caused by Virtualizer._renderView getting called before the Virtualizer._collection has been updated with the latest collection (presumably due to set collection running in a transaction. I can see:

1. The new collection (that contains the key) passed into set collection
2. Virtualizer._renderView is called with a key that is not yet in the Virtualizer._collection and crashes
3. The transaction that sets Virtualizer._collection runs, albeit too late.

🔦 Context

No response

🖥️ Steps to Reproduce

https://codesandbox.io/p/sandbox/frosty-shtern-k9hv39

Version

^3.34.1

What browsers are you seeing the problem on?

Chrome

If other, please specify.

No response

What operating system are you using?

MacOS

🧢 Your Company/Team

No response

🕷 Tracking Issue

No response

[upender7270]

I am also facing this issue frequently in the async combo box.

[richardbann]

Hi, see my comment under #6074. I think the root cause is the same.