ListView and useAsyncList fails with TypeError: Cannot read properties of undefined (reading 'key')

[synox]

Provide a general summary of the issue here

When using AsyncListData with ListView, and setting the ListView.height=100%, and I scroll quickly down and up, I get the following error:

TypeError: Cannot read properties of undefined (reading 'key')
    at $4e8b0456ef72939f$export$9610e69494fadfd2 (https://.../vendors-node_modules_..._esm_index_js-node_modules_...-fd91c693251bcbbc8d02113289.js:125258:19)

https://github.com/adobe/react-spectrum/assets/2250964/e85670b1-8a11-4827-9b92-2f3a1d1127ee

🤔 Expected Behavior?

It should not show an error

😯 Current Behavior

It shows an error on scroll.

💁 Possible Solution

No response

🔦 Context

No response

🖥️ Steps to Reproduce

reproduce in react-spectrum-v3-playground:

function Component() {
  const list = useAsyncList({
    async load({ cursor, filterText, signal }) {
      const res = await fetch(cursor || 'https://pokeapi.co/api/v2/pokemon?limit=10', {
        signal,
      });
      const json = await res.json();
      return {
        items: json.results,
        cursor: json.next,  
      };
    },
  });

  return (
    <View>
      <ListView height="300px"
        items={list.items}
        loadingState={list.loadingState}
        onLoadMore={list.loadMore}
      >
        {(item) => {
          return <Item key={item.name}>{item.name}</Item>;
        }}
      </ListView>
    </View>
  );
}

Version

3.33.2

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

Adobe AEM

🕷 Tracking Issue

No response

[snowystinger]

I tried in Chrome and used the provided code in the playground, but I am unable to reproduce. Could you provide an already built codesandbox or stackblitz which reproduces it? Just to make sure I didn't accidentally do something silly when I copy pasted

[synox]

I am able to reproduce on https://j7v3sy.csb.app/ with Chrome and Firefox. Please try it there. -> Editor

[snowystinger]

Thank you very much, I can reproduce now.

[synox]

@snowystinger are there any news on this?

[mitrank]

@synox I'm using Microsoft Edge browser to check the sandbox and link you mentioned above but to me it's working fine on scrolling up and down quickly, it isn't showing the null error you mentioned. However, when trying the code you mentioned in the Steps to Reproduce section, I encountered the error which mentioned the destructured element 'scale' is null while extracting it using useProvider hook. So, I tried just logging the scale extracting it from the useProvider hook, and it shows null.

[snowystinger]

No updates from my end. I've had competing priorities.

[upender7270]

I am also facing this issue, is there any update on this? It's a blocker to us.

[richardbann]

This seems to be the same as #6181. The virtualizer wants to render an item (based on the layout, which is computed from the actual collection), but the internal collection is lagged behind (the collection update is waiting in a transaction for the animation to complete). I have a fix for that but it's rather hacky... I have ruled out these cases in the Virtualizer by adding a check in getReusableView, _correctItemOrder and updateSubviews methods: Virtualizer.ts @snowystinger What do you think?

[bmingles]

In case it helps, the codesandbox attached to #6181 will automatically reproduce this issue 100% of the time.

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